/* Central: shell (fix/central-ui3-shell-b, rodada 3, 2026-11-02). Carregado depois de styles.css.
   Desktop (>= 860 px): ícone em cada item da navegação e o cartão da conta de 56 px.
   Celular e tablet estreito (< 860 px, o mesmo corte do styles.css): a tela tem altura
   fixa. O topo (56 px) e a barra de abas ficam fora da rolagem; só o .main rola. #app e
   .main são o bloco de contenção (position: relative): o sr-only e os olhos das mensagens
   não escapam da tela e o documento não cresce.
   A barra lateral vira gaveta (fora do fluxo). Nada aqui muda regra de negócio: só a casca.
   Cores da casa: #0b0e0c, #0f1411, #121915, #1b231e, #7ef0c1. */

/* ── navegação: ícone à esquerda, rótulo, contador à direita ── */
.nav-item{justify-content:flex-start;gap:10px}
.nav-ico{display:inline-flex;flex:none;color:var(--apagado);line-height:0}
.nav-item.on .nav-ico{color:var(--destaque)}
.nav-item .novas-slot{margin-left:auto}
.nav-item:focus-visible,.acct-ir:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}

/* ── a conta no rodapé: cartão de 56 px. O nome numa linha, com reticências; o papel ("acesso de emergência") quebra em até duas linhas, sem cortar a palavra ── */
.acct{height:56px;padding:0 6px 0 8px;gap:8px;align-items:center;border-radius:14px;background:var(--realce)}
.acct-ir{flex:1 1 auto;min-width:0;height:auto;min-height:44px;padding:0 4px 0 0;gap:10px;border-radius:var(--raio-controle)}
.acct-ir .me{width:36px;height:36px;font-size:12.5px}
.acct-ir > div{flex:1;min-width:0}
.acct-ir b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-ir b{font-size:14px;line-height:1.25}
.acct-ir small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:12px;line-height:1.3;color:var(--apagado)}
.acct-sair{flex:none;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--raio-controle);background:none;color:var(--apagado);cursor:pointer}
.acct-sair:hover{background:var(--hover);color:var(--texto)}
.acct-sair:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}

/* o topo do celular, a gaveta e a barra de abas só existem abaixo de 860 px */
.topo-m{display:none}
.gaveta-fundo{display:none}
.abas{display:none}

@media (max-width: 859px){
  /* a tela ocupa a altura da janela: topo, cartão da Ver como e barra de abas ficam
     no lugar; só o .main rola (a rolagem é dele, não do corpo da página). position
     relative faz de #app e do .main o bloco que contém os absolutos (sr-only, olhos):
     sem isso eles escapam do recorte e a página cresce por baixo das barras */
  #app{position:relative;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  .app,.app.com-faixa{flex:1 1 auto;min-height:0;height:auto;overflow:visible}
  .main{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  body.gaveta-aberta{overflow:hidden}

  /* o topo: menu, marca e a lupa (a mesma paleta Ctrl+K); a busca larga some */
  .topo-m{display:flex;flex:none;height:56px;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;background:var(--fundo);border-bottom:1px solid var(--linha-suave)}
  .topo-m .brand{flex:1;min-width:0;justify-content:center;font-size:17px}
  .topo-ic{flex:none;width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--raio-controle);background:none;color:var(--texto-2);cursor:pointer}
  .topo-ic:hover{background:#151d18}
  .topo-ic:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}
  .top{display:none}
  .faixa-vercomo{position:relative;top:auto;flex:none}

  /* a barra lateral sai do fluxo: uma gaveta que abre da esquerda (220 ms) */
  .side{position:fixed;top:0;left:0;bottom:0;z-index:50;width:min(86vw,320px);height:100vh;height:100dvh;max-height:none;padding:16px 14px 0;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:3px;overflow-y:auto;overscroll-behavior:contain;background:var(--lateral);border-right:1px solid var(--linha-suave);border-bottom:0;box-shadow:0 0 40px rgba(0,0,0,.6);transform:translateX(-100%);visibility:hidden}
  .side.aberta{transform:none;visibility:visible;animation:gaveta-entrar 220ms ease-out}
  .side .side-top{flex-direction:column;align-items:stretch;gap:12px;margin:0 0 8px;padding:4px 8px 16px;border-bottom:1px solid var(--linha-suave)}
  .side .side-top .seletor-empresa{flex:none}
  .side .nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:3px;width:100%}
  .side .nav-item{width:100%;min-height:44px;padding:10px 12px}
  .side .sec{display:block;margin:16px 12px 6px}
  .side .nav-sub{display:flex;flex-direction:column;flex-wrap:nowrap;order:0;width:auto;gap:4px;margin:6px 0 8px 14px;padding:0 0 0 12px;border-left:1px solid #2a3530;border-top:0}
  .side .nav-sub .nav-item{min-height:40px;padding:8px 10px;font-size:14px}
  /* a conta fica presa no pé da gaveta (sem folga abaixo: o padding do pé é que a afasta da borda) */
  .side .foot{position:sticky;bottom:0;z-index:1;margin:auto -14px 0;padding:12px 14px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--linha-suave);background:var(--lateral)}
  .side .acct{width:100%}
  .acct-sair{width:40px;height:40px}

  /* o fundo escurecido: um toque nele fecha a gaveta */
  .gaveta-fundo{display:block;position:fixed;inset:0;z-index:48;margin:0;padding:0;border:0;background:rgba(0,0,0,.55);animation:gaveta-fundo 220ms ease-out}

  /* a barra de abas: fixa no pé da tela (64 px + a área segura), fora da rolagem */
  .abas{display:grid;flex:none;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(64px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:var(--lateral);border-top:1px solid var(--linha-suave)}
  .aba{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;padding:6px 2px;border:0;border-radius:var(--raio-controle);background:none;color:var(--apagado);font-size:11px;font-weight:500;line-height:1.2;cursor:pointer}
  .aba span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .aba-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:28px;border-radius:999px}
  .aba.on{color:var(--destaque)}
  .aba.on .aba-ico{background:var(--verde-ativo)}
  .aba:focus-visible{outline:2px solid var(--destaque);outline-offset:-2px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}

  /* o composer das conversas fica preso no pé da área de conteúdo, logo acima da barra */
  .comp-bloco{position:sticky;bottom:0;z-index:2;background:var(--fundo);padding:6px 0 8px}
}

@keyframes gaveta-entrar{from{transform:translateX(-100%)}to{transform:none}}
@keyframes gaveta-fundo{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .side{transition:none}
  .side.aberta,.gaveta-fundo{animation:none}
}

/* ── (cui5) Paleta de comandos: o glifo do DOT antes do nome; a lista com o fim visível (o fade) e a dica de
   teclado só onde há teclado (abaixo de 640px, o toque não usa as setas) ── */
.paleta-glifo{flex:none;display:inline-flex;align-items:center}
.paleta-res{max-height:min(60vh,520px);padding:0 4px 24px;-webkit-mask-image:linear-gradient(#000 calc(100% - 24px),transparent);mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}
@media (max-width:640px){
  .paleta-dica{display:none}
}