/* ============================================================
   NAVEGAÇÃO COMPARTILHADA (barra.js) — Masters e Painel Admin
   ============================================================
   Barra de abas flutuante e folha "Mais" do celular, mais a etiqueta
   de nome do menu recolhido no computador. Os dois arquivos HTML
   carregam este CSS; os tokens usam o nome dos dois lados
   (var(A, var(B))) porque as páginas não batizaram as cores igual.
   Saiu do index.html sem mudar uma regra: o celular dos Masters
   continua idêntico.
   ============================================================ */
.tabbar,.folha,.folha-fundo{display:none}

@media(max-width:960px){
    /* ============ barra de abas (flutuante) ============
       Ela NÃO encosta na borda de baixo. Colada, os botões caíam dentro
       da faixa de gestos do iPhone: o toque virava swipe do sistema.
       env(safe-area-inset-bottom) sozinho não resolve, porque no Safari
       fora do modo tela cheia ele vale 0 — daí o max() com um piso fixo. */
    /* a direção e a rolagem vão explícitas: o admin estiliza todo <nav>
       como coluna rolável (é o menu lateral dele), e sem isto a barra saía
       empilhada na vertical */
    .tabbar{
      display:flex;flex-direction:row;overflow:visible;position:fixed;z-index:70;
      left:12px;right:12px;
      bottom:max(env(safe-area-inset-bottom,0px),18px);
      padding:5px;gap:2px;
      background:color-mix(in srgb,var(--panel) 92%,transparent);
      backdrop-filter:blur(20px) saturate(1.4);
      -webkit-backdrop-filter:blur(20px) saturate(1.4);
      border:1px solid var(--line-2);
      border-radius:20px;
      box-shadow:0 10px 30px -8px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);
    }
    .tab{
      flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
      min-height:50px;padding:7px 2px;border:0;background:transparent;cursor:pointer;
      color:var(--muted-2);font-family:inherit;font-size:11px;font-weight:500;letter-spacing:0;
      border-radius:15px;position:relative;
      transition:color .18s ease,background .18s ease;
    }
    /* ícone e rótulo próximos em peso: 20px de ícone para 11px de texto
       é a proporção que não deixa um engolir o outro */
    .tab svg{width:20px;height:20px;stroke-width:1.8;transition:transform .22s cubic-bezier(.2,.9,.3,1.2)}
    .tab .tb-lab{line-height:1.1;white-space:nowrap}
    .tab:active svg{transform:scale(.86)}          /* resposta imediata ao toque */
    /* numa barra flutuante o risco no topo fica solto; a pastilha
       preenchida lê melhor e marca o alvo inteiro */
    .tab.on{color:var(--cyan-text,var(--cyan));background:color-mix(in srgb,var(--cyan) 14%,transparent)}
    .tab.on .tb-lab{font-weight:600}
    .tab.on svg{stroke-width:2.1}
    /* bolinha de aviso, para quando uma aba precisar chamar atenção */
    .tab .tb-dot{position:absolute;top:6px;right:calc(50% - 16px);width:7px;height:7px;
      border-radius:50%;background:var(--warn);display:none}
    .tab.tem-aviso .tb-dot{display:block}

    /* ============ folha que sobe de baixo ============ */
    .folha-fundo{
      display:block;position:fixed;inset:0;z-index:78;background:rgba(0,0,0,.5);
      opacity:0;pointer-events:none;transition:opacity .26s ease;
      backdrop-filter:blur(2px);
    }
    .folha-fundo.abre{opacity:1;pointer-events:auto}
    .folha{
      display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:79;
      max-height:min(82dvh,720px);
      background:var(--panel);border:1px solid var(--line);border-bottom:0;
      border-radius:20px 20px 0 0;
      box-shadow:0 -18px 50px rgba(0,0,0,.55);
      transform:translateY(101%);
      transition:transform .3s cubic-bezier(.2,.9,.3,1);
      padding-bottom:env(safe-area-inset-bottom,0px);
    }
    .folha.abre{transform:translateY(0)}
    .fo-pega{width:38px;height:4px;border-radius:4px;background:var(--line-2);
      margin:9px auto 2px;flex:0 0 auto}
    .fo-head{display:flex;align-items:center;gap:10px;padding:8px 18px 12px;flex:0 0 auto}
    .fo-head h3{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin:0}
    .fo-x{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
      border:0;background:var(--surface);color:var(--muted);cursor:pointer}
    .fo-x svg{width:17px;height:17px}
    .fo-corpo{overflow-y:auto;overscroll-behavior:contain;padding:0 12px 14px;flex:1 1 auto}

    .fo-item{
      display:flex;align-items:center;gap:13px;width:100%;
      min-height:56px;padding:11px 12px;border:0;border-radius:14px;
      background:transparent;color:var(--ink2, var(--txt));cursor:pointer;
      font-family:inherit;font-size:14.5px;font-weight:500;text-align:left;text-decoration:none;
      transition:background .16s ease;
    }
    .fo-item:active{background:var(--surface-2)}
    .fo-item > svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
    .fo-item .fi-txt{flex:1;min-width:0}
    .fo-item .fi-txt b{display:block;font-weight:600;color:var(--ink);font-size:14.5px}
    .fo-item .fi-txt span{display:block;font-size:12px;color:var(--muted-2);margin-top:1px}
    .fo-item .fi-num{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
      border-radius:9px;background:var(--surface);color:var(--muted);
      font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
    .fo-item.on .fi-num{background:color-mix(in srgb,var(--cyan) 18%,transparent);color:var(--cyan-text,var(--cyan))}
    .fo-item.on .fi-txt b{color:var(--cyan-text,var(--cyan))}
    .fo-item .fi-ring{flex:0 0 auto}
    .fo-sep{height:1px;background:var(--line);margin:8px 12px}
    .fo-tit{padding:12px 12px 6px;font-size:11px;font-weight:700;letter-spacing:.1em;
      text-transform:uppercase;color:var(--muted-2)}
    .fo-item.perigo{color:var(--warn-text,var(--warn))}
    .fo-item.perigo > svg{color:var(--warn-text,var(--warn))}
    /* contador numa aba (conversas sem resposta no admin) */
    .tab .tb-cont{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;
      border-radius:999px;display:grid;place-items:center;font-size:10px;font-weight:800;line-height:1;
      background:var(--warn,#ffb454);color:#1b1205;font-variant-numeric:tabular-nums}
    .folha .fo-x:focus-visible,.fo-item:focus-visible,.tab:focus-visible{outline:2px solid var(--cyan,#4dc9f6);outline-offset:-2px}
}

/* quem pediu menos movimento não recebe a folha deslizando */
@media(max-width:960px) and (prefers-reduced-motion:reduce){
  .folha{transition:none}
  .tab svg{transition:none}
}

/* ---- etiqueta de nome do menu recolhido (computador) ----
   Mora no <body>, posicionada pelo barra.js ao lado do ícone. */
.mr-dica{position:fixed;z-index:500;transform:translate(-4px,-50%);opacity:0;pointer-events:none;
  padding:7px 11px;border-radius:9px;white-space:nowrap;
  font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2;letter-spacing:0;
  color:#eaf1ff;background:#121a2e;border:1px solid rgba(120,160,255,.28);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.8);transition:opacity .12s ease,transform .12s ease}
.mr-dica.on{opacity:1;transform:translate(0,-50%)}
@media(max-width:960px){ .mr-dica{display:none} }
@media(prefers-reduced-motion:reduce){ .mr-dica{transition:none} }