/* =============================================================
   CASCA — header, navegação inferior, palco das telas,
   dock de ação, porta de entrada e faixa de pendências
   ============================================================= */

/* ---------- header ---------- */
.topo{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--slab);
  color:var(--slab-fg);
  padding:var(--s2) var(--s4);
  padding-top:calc(var(--s2) + var(--safe-t));
  display:flex;
  align-items:center;
  gap:var(--s3);
  border-bottom:1px solid var(--slab-edge);
}

.marca{
  flex:none;              /* nunca quebra em duas linhas */
  white-space:nowrap;
  font-weight:700;
  letter-spacing:var(--ls-tight);
  font-size:var(--fs-md);
  line-height:1;
}
.marca span{color:var(--heat-laje)}

/* O pulso é botão: leva pra tela de Conexão. É o lugar natural —
   ele mostra o estado do agente, tocar mostra o porquê.
   O rótulo é curto de propósito: com a marca, a engrenagem e o
   botão de tema, "agente ativo" não cabia em 380px. */
.pulso{
  margin-left:auto;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-tiny);
  color:var(--slab-fg-2);
  display:flex;
  align-items:center;
  gap:var(--s2);
  min-width:0;
  min-height:var(--tap);
  padding:0 var(--s2);
  background:none;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background var(--t1) var(--ease), color var(--t1) var(--ease),
             border-color var(--t1) var(--ease);
}
.pulso:hover{background:var(--slab-2);color:var(--slab-fg)}
.pulso.on{border-color:var(--slab-edge);background:var(--slab-2);color:var(--slab-fg)}
.pulso b{
  font-weight:400;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bolinha{
  width:7px;height:7px;border-radius:50%;
  background:var(--live);
  flex:none;
  box-shadow:0 0 0 0 rgba(61,220,151,.7);
  animation:ping 2.4s var(--ease) infinite;
}
.bolinha.off{background:#F87171;animation:none}
@keyframes ping{
  70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}
}

/* botão de tema no header */
.tema-bt{
  flex:none;
  width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  border:1px solid var(--slab-edge);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--slab-fg-2);
  cursor:pointer;
  transition:background var(--t1) var(--ease), color var(--t1) var(--ease);
}
.tema-bt:hover{background:var(--slab-2);color:var(--slab-fg)}
.tema-bt svg{width:17px;height:17px;display:block}

/* ---------- palco ---------- */
main{
  max-width:var(--w);
  margin:0 auto;
  padding:var(--s5) var(--s4) var(--s4);
}

.view{display:none}
.view.on{display:block}

/* Transição direcional: avançar entra pela direita, voltar pela
   esquerda. Dá profundidade ao fluxo cidade → caravana → disparo. */
.view.on.avanca{animation:entra-dir var(--t3) var(--ease-out) both}
.view.on.volta {animation:entra-esq var(--t3) var(--ease-out) both}
@keyframes entra-dir{from{opacity:0;transform:translate3d(18px,0,0)}to{opacity:1;transform:none}}
@keyframes entra-esq{from{opacity:0;transform:translate3d(-18px,0,0)}to{opacity:1;transform:none}}

/* troca de aba não tem direção — só sobe */
.view.on.troca{animation:entra-sobe var(--t2) var(--ease-out) both}
@keyframes entra-sobe{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* ---------- voltar ---------- */
.voltar{
  background:none;border:none;font:inherit;
  font-size:var(--fs-sm);color:var(--fg-2);
  cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);
  margin:calc(var(--s3) * -1) 0 var(--s1) calc(var(--s2) * -1);
  padding:0 var(--s2);
  border-radius:var(--r-sm);
  transition:color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.voltar:hover{color:var(--fg);background:var(--bg-sunk)}
.voltar svg{width:15px;height:15px;flex:none}

/* ---------- dock: ação principal contextual ---------- */
.dock{
  position:fixed;
  left:0;right:0;
  bottom:calc(var(--barra-h) + var(--safe-b));
  z-index:30;
  padding:var(--s8) var(--s4) var(--s3);
  pointer-events:none;
  background:linear-gradient(to bottom,transparent, var(--bg) 55%);
}
.dock[hidden]{display:none}
.dock-in{
  max-width:var(--w);
  margin:0 auto;
  pointer-events:auto;
}
/* o dock flutua sobre a página: abre espaço pra não tapar o fim da lista */
body.com-dock{padding-bottom:calc(var(--barra-h) + var(--safe-b) + 84px)}

/* ---------- navegação inferior ---------- */
.barra{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:50;
  display:flex;
  background:var(--card);
  border-top:1px solid var(--edge);
  padding-bottom:var(--safe-b);
  box-shadow:0 -1px 0 var(--edge-2), 0 -8px 24px -16px rgba(19,26,32,.35);
}

.barra button{
  flex:1;
  min-width:0;
  min-height:var(--barra-h);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  /* 6 destinos em 380px dão ~63px cada: o padding lateral fica em 2px
     pra "Com você" e "Números" caberem sem reticências */
  padding:var(--s2) 2px var(--s1);
  font:inherit;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--fg-2);
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
  transition:color var(--t1) var(--ease);
}
.barra button svg{
  width:21px;height:21px;
  display:block;
  transition:transform var(--t2) var(--ease);
}
.barra button span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.barra button.on{color:var(--heat)}
.barra button.on svg{transform:translateY(-1px) scale(1.06)}
.barra button:active svg{transform:scale(.9)}
.barra button:focus-visible{outline:2px solid var(--focus);outline-offset:-3px;border-radius:var(--r-sm)}

/* traço do item ativo */
.barra button::after{
  content:'';
  position:absolute;
  top:0;left:50%;
  width:0;height:2px;
  border-radius:0 0 2px 2px;
  background:var(--heat);
  transform:translateX(-50%);
  transition:width var(--t2) var(--ease);
}
.barra button.on::after{width:22px}

/* contador de conversas paradas */
.barra .sino{
  position:absolute;
  top:5px;
  left:calc(50% + 7px);
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:var(--r-full);
  background:var(--heat);
  color:var(--sobre-heat);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9px;
  font-weight:600;
  line-height:16px;
  text-align:center;
  border:2px solid var(--card);
  box-sizing:content-box;
}
.barra .sino[hidden]{display:none}

/* ---------- faixa de escritas pendentes ----------
   Fica logo abaixo do header, e não em cima da barra: lá embaixo
   brigaria com o dock, e aqui ele vê sem precisar rolar. */
.pendencia{
  position:sticky;
  top:calc(var(--topo-h) + var(--safe-t));
  z-index:35;
  display:flex;
  align-items:center;
  gap:var(--s2);
  padding:var(--s2) var(--s4);
  background:var(--warn-soft);
  border-bottom:1px solid var(--warn-edge);
  color:var(--warn-fg);
  font-size:var(--fs-xs);
  font-weight:500;
  animation:desce var(--t2) var(--ease-out) both;
}
.pendencia[hidden]{display:none}
.pendencia .gira{
  width:13px;height:13px;flex:none;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:rodar .8s linear infinite;
}
.pendencia button{
  margin-left:auto;
  flex:none;
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:600;
  color:inherit;
  background:none;
  border:1px solid currentColor;
  border-radius:var(--r-full);
  padding:5px 11px;
  cursor:pointer;
}
@keyframes rodar{to{transform:rotate(360deg)}}
@keyframes desce{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

/* ---------- porta de entrada ---------- */
.gate{
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--slab);
  display:grid;
  place-items:center;
  padding:var(--s6);
  animation:aparece var(--t2) var(--ease) both;
}
.gate[hidden]{display:none}
@keyframes aparece{from{opacity:0}to{opacity:1}}

.gate-box{width:100%;max-width:320px;text-align:center}
.gate-box .marca{font-size:var(--fs-2xl);margin-bottom:var(--s2)}
.gate-box p{color:var(--slab-fg-2);font-size:var(--fs-sm);margin-bottom:var(--s5)}
.gate-box input{
  background:var(--slab-2);
  border-color:var(--slab-edge);
  color:var(--slab-fg);
  text-align:center;
  font-size:var(--fs-lg);
  letter-spacing:.08em;
  margin-bottom:var(--s3);
}
.gate-box input::placeholder{color:var(--slab-fg-2);letter-spacing:normal}
.gate-box input:focus{outline:2px solid var(--heat);outline-offset:-1px;background:var(--slab-2)}
.gate-erro{
  color:#F87171;
  font-size:var(--fs-xs);
  min-height:18px;
  margin-top:var(--s3);
}

/* ---------- desktop ---------- */
@media (min-width:720px){
  main{padding-top:var(--s7)}
  h1{font-size:var(--fs-3xl)}

  /* A barra continua ocupando a largura toda (o fundo precisa disso),
     mas os itens se agrupam no centro, alinhados com a coluna de
     conteúdo. Espalhados em 1280px eles ficam soltos. */
  .barra{justify-content:center}
  .barra button{flex:0 0 100px}
}