/* mb1010 (10/10/2026, pedido do Joel, testado no celular dele)
   Só CELULAR/TABLET (< 980px, onde existe o menu inferior). O computador não muda.
   1) Seletor de tema: canto inferior ESQUERDO, logo acima do "Dashboard" do menu
      inferior; recolhido mostra só o tema atual (um botão), tocar abre os 3.
   2) Sininho de notificações no topo (à direita), com a lista em folha inferior.
   O mobile-mb1010.js move o sino para fora do menu lateral (que some no celular)
   e mede o menu inferior para o seletor ficar logo acima dele. */
@media (max-width:979.98px){
  /* ---------- 1) seletor de tema ---------- */
  html .tema-switch{
    top:auto;right:auto;
    left:calc(10px + env(safe-area-inset-left, 0px));
    bottom:var(--mb-tema-bottom, calc(76px + env(safe-area-inset-bottom, 0px)));
    z-index:65;
    box-shadow:0 10px 26px -8px rgba(0,0,0,.55);
  }
  html .tema-switch .tema-op{width:40px;height:40px}
  html .tema-switch.mb-recolhido{padding:3px;gap:0}
  html .tema-switch.mb-recolhido .tema-op:not([aria-pressed="true"]){display:none}
  /* o rodapé termina acima do seletor (nada fica escondido atrás dele) */
  html .rodape-base{padding-bottom:calc(124px + env(safe-area-inset-bottom, 0px))}
  /* no Chat MaIA a conversa ocupa a tela toda: o seletor sai do caminho */
  html body:has(.cm-shell) .tema-switch{display:none}

  /* ---------- 2) sininho no topo ---------- */
  html .nav-sino.mb-sino-solto{
    position:absolute;z-index:80;
    top:calc(30px + env(safe-area-inset-top, 0px));
    right:calc(12px + env(safe-area-inset-right, 0px));
  }
  html .nav-sino.mb-sino-chat{margin-left:auto;position:relative;z-index:5}
  html .nav-sino .nav-sino-btn{width:44px;height:44px;border-radius:13px;background:var(--card)}
  html .nav-sino .nav-sino-badge{top:-6px;right:-6px;min-width:20px;height:20px;font-size:11.5px;line-height:20px}
  /* aberto: fundo escurecido + folha inferior, acima do menu e de tudo */
  html .nav-sino.aberto{z-index:2600}
  html .nav-sino.aberto::before{content:"";position:fixed;inset:0;z-index:0;
    background:rgba(0,0,0,.5);-webkit-tap-highlight-color:transparent}
  html body .nav-sino-drop{
    position:fixed;z-index:1;left:0;right:0;bottom:0;top:auto;
    width:auto;max-width:none;
    max-height:78vh;max-height:78dvh;overflow-y:auto;overscroll-behavior:contain;
    border-radius:22px 22px 0 0;border:0;border-top:1px solid var(--line);
    padding:6px max(12px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background:var(--card);
    box-shadow:0 -18px 48px rgba(0,0,0,.35);
  }
  html .nav-sino-drop .mb-sino-alca{display:block;width:42px;height:5px;border-radius:99px;
    background:var(--line);margin:6px auto 4px}
  html .nav-sino-drop .nav-sino-h{display:flex;align-items:center;justify-content:space-between;
    font-size:16px;padding:8px 4px 10px;position:sticky;top:-6px;background:var(--card);z-index:1}
  html .nav-sino-drop .mb-sino-fechar{display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);
    background:transparent;color:var(--txt-soft);font:700 14px/1 var(--font-body);cursor:pointer}
  html .nav-sino-drop .nav-sino-item{padding:14px 8px;min-height:56px;gap:12px}
  html .nav-sino-drop .nav-sino-item .ic{width:36px;height:36px;font-size:17px}
  html .nav-sino-drop .nav-sino-item .tx b{font-size:15px}
  html .nav-sino-drop .nav-sino-item .tx small{font-size:13.5px}
  html .nav-sino-drop .nav-sino-item .tx .q{font-size:12px}
  html .nav-sino-drop .nav-sino-vazio{padding:28px 10px;font-size:15px}
}
/* computador: os extras da folha inferior não aparecem */
@media (min-width:980px){
  .nav-sino-drop .mb-sino-alca,.nav-sino-drop .mb-sino-fechar{display:none}
}