/* =====================================================================
   FehulBot instalado na tela inicial (PWA iOS/Android)
   ---------------------------------------------------------------------
   No aplicativo a página ocupa a tela inteira e passa por baixo do relógio,
   do wi-fi e da bateria. Aqui desenhamos uma faixa preta exatamente nessa
   região e empurramos a topbar para logo abaixo dela — as duas coladas,
   parecendo uma peça só.

   Vale SOMENTE no aplicativo (`display-mode: standalone` ou a classe
   `is-app`, que o JS coloca no <html> para cobrir o iOS antigo, onde o
   display-mode ainda não existe). No site pelo navegador nada muda.

   Este arquivo é o ÚLTIMO a carregar de propósito: identity.css e
   operations.css redefinem `padding` da topbar em shorthand e apagariam
   o recuo se viessem depois.
   ===================================================================== */

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  /* faixa preta sobre a área do relógio/bateria */
  body::before{
    content:'';position:fixed;top:0;left:0;right:0;
    height:env(safe-area-inset-top,0px);
    background:#000;z-index:120;pointer-events:none;
  }
  .top{
    top:0;
    padding-top:calc(12px + env(safe-area-inset-top,0px));
    background:#000;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .lnav{padding-top:env(safe-area-inset-top,0px);background:#000}
  .side{padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .imp-bar{padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .imp-bar + .shell .top{padding-top:12px}
  .auth,.legal{padding-top:env(safe-area-inset-top,0px)}
  .modal-bg{padding-top:env(safe-area-inset-top,0px)}
  .dd-menu{top:calc(env(safe-area-inset-top,0px) + 58px)}
}

/* Mesma coisa pela classe, para iOS anterior ao suporte a display-mode.
   Repetido em vez de agrupado: navegador que não entende a media query
   acima ainda precisa aplicar este bloco. */
html.is-app body::before{
  content:'';position:fixed;top:0;left:0;right:0;
  height:env(safe-area-inset-top,0px);
  background:#000;z-index:120;pointer-events:none;
}
html.is-app .top{
  top:0;
  padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:#000;backdrop-filter:none;-webkit-backdrop-filter:none;
}
html.is-app .lnav{padding-top:env(safe-area-inset-top,0px);background:#000}
html.is-app .side{padding-top:calc(18px + env(safe-area-inset-top,0px))}
html.is-app .imp-bar{padding-top:calc(8px + env(safe-area-inset-top,0px))}
html.is-app .imp-bar + .shell .top{padding-top:12px}
html.is-app .auth,html.is-app .legal{padding-top:env(safe-area-inset-top,0px)}
html.is-app .modal-bg{padding-top:env(safe-area-inset-top,0px)}
html.is-app .dd-menu{top:calc(env(safe-area-inset-top,0px) + 58px)}