/* Cerveau PWA V182 — zones sûres et contournement du viewport système iOS. */
:root{
  --pwa-safe-top:env(safe-area-inset-top,0px);
  --pwa-safe-right:env(safe-area-inset-right,0px);
  --pwa-safe-bottom:env(safe-area-inset-bottom,0px);
  --pwa-safe-left:env(safe-area-inset-left,0px);
  --pwa-effective-safe-bottom:var(--pwa-safe-bottom);
  --pwa-system-gap-bottom:0px;
  --pwa-mobile-nav-surface:#faf2f9;
}

html.pwa-ios-system-gap{
  /* iOS 26.5.2+ réserve déjà une bande système hors du viewport. */
  --pwa-effective-safe-bottom:0px;
}

html.pwa-standalone,
html.pwa-standalone body,
html.pwa-standalone #app{
  min-height:100%;
  min-height:100dvh;
  background:#37223f;
  overscroll-behavior-y:none;
}

html.pwa-standalone:has(.app-shell),
html.pwa-standalone:has(.app-shell) body,
html.pwa-standalone:has(.app-shell) #app{
  background:var(--brain-canvas,#f4eef5);
}

.pwa-standalone .app-boot-screen{
  min-height:100dvh;
  padding:
    calc(24px + var(--pwa-safe-top))
    calc(24px + var(--pwa-safe-right))
    calc(24px + var(--pwa-effective-safe-bottom))
    calc(24px + var(--pwa-safe-left));
}

.pwa-standalone .saas-auth{
  min-height:100dvh;
  padding-top:max(var(--pwa-safe-top),32px);
  padding-right:max(var(--pwa-safe-right),32px);
  padding-bottom:max(var(--pwa-effective-safe-bottom),32px);
  padding-left:max(var(--pwa-safe-left),32px);
}

.pwa-standalone .login-shell{
  min-height:100dvh;
  padding-top:max(var(--pwa-safe-top),28px);
  padding-right:max(var(--pwa-safe-right),28px);
  padding-bottom:max(var(--pwa-effective-safe-bottom),28px);
  padding-left:max(var(--pwa-safe-left),28px);
}

.pwa-standalone .workspace>header{
  padding-top:calc(27px + var(--pwa-safe-top))!important;
  padding-right:calc(42px + var(--pwa-safe-right))!important;
  padding-left:calc(42px + var(--pwa-safe-left))!important;
}

.pwa-standalone .workspace>.content{
  margin-right:var(--pwa-safe-right);
  margin-left:var(--pwa-safe-left);
}

@media(max-width:1100px){
  .pwa-standalone .workspace>header{
    padding-top:calc(23px + var(--pwa-safe-top))!important;
    padding-right:calc(27px + var(--pwa-safe-right))!important;
    padding-left:calc(27px + var(--pwa-safe-left))!important;
  }
}

@media(max-width:900px){
  .pwa-standalone .saas-auth{
    padding-top:calc(14px + var(--pwa-safe-top));
    padding-right:calc(14px + var(--pwa-safe-right));
    padding-bottom:calc(14px + var(--pwa-effective-safe-bottom));
    padding-left:calc(14px + var(--pwa-safe-left));
  }

  .pwa-standalone .login-shell{
    padding-top:calc(14px + var(--pwa-safe-top))!important;
    padding-right:calc(14px + var(--pwa-safe-right))!important;
    padding-bottom:calc(14px + var(--pwa-effective-safe-bottom))!important;
    padding-left:calc(14px + var(--pwa-safe-left))!important;
  }
}

@media(max-width:700px){
  /* En PWA iOS, un dock `fixed` peut rester peint au-dessus du bas après le
     clavier ou une restauration. La navigation principale vit donc dans la
     seconde ligne de la grille; seule la feuille « Plus » se superpose. */
  html.pwa-standalone,
  html.pwa-standalone body,
  html.pwa-standalone #app{
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  html.pwa-standalone.pwa-ios-system-gap:has(.app-shell),
  html.pwa-standalone.pwa-ios-system-gap:has(.app-shell) body{
    background:var(--pwa-mobile-nav-surface)!important;
  }

  html.pwa-standalone.pwa-ios-system-gap:has(.app-shell) #app{
    background:var(--brain-canvas,#f4eef5)!important;
  }

  .pwa-standalone .app-shell,
  .pwa-standalone .app-shell.sidebar-collapsed{
    position:relative;
    height:100dvh!important;
    min-height:100dvh!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    padding-bottom:0!important;
    overflow:hidden!important;
    background:var(--brain-canvas,#f4eef5)!important;
  }

  .pwa-standalone .app-shell>.workspace,
  .pwa-standalone .app-shell.sidebar-collapsed>.workspace{
    grid-column:1!important;
    grid-row:1!important;
    height:auto!important;
    min-height:0!important;
    overflow-y:auto!important;
  }

  .pwa-standalone .workspace>.content{
    padding-bottom:calc(68px + var(--pwa-effective-safe-bottom))!important;
    scroll-padding-bottom:calc(68px + var(--pwa-effective-safe-bottom));
  }

  .pwa-standalone .workspace>header{
    min-height:calc(86px + var(--pwa-safe-top))!important;
    margin:0 9px!important;
    padding-top:calc(15px + var(--pwa-safe-top))!important;
    padding-right:max(102px,calc(15px + var(--pwa-safe-right)))!important;
    padding-left:calc(14px + var(--pwa-safe-left))!important;
    border-radius:0 0 19px 19px!important;
  }

  .pwa-standalone .app-shell>aside:not(.mobile-nav-expanded),
  .pwa-standalone .app-shell.sidebar-collapsed>aside:not(.mobile-nav-expanded){
    position:relative!important;
    grid-column:1!important;
    grid-row:2!important;
    inset:auto!important;
    align-self:end!important;
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    height:calc(50px + var(--pwa-effective-safe-bottom))!important;
    min-height:calc(50px + var(--pwa-effective-safe-bottom))!important;
    max-height:calc(50px + var(--pwa-effective-safe-bottom))!important;
    padding:3px calc(6px + var(--pwa-safe-right)) var(--pwa-effective-safe-bottom) calc(6px + var(--pwa-safe-left))!important;
    border-radius:18px 18px 0 0!important;
  }

  .pwa-ios-system-gap .app-shell>aside:not(.mobile-nav-expanded),
  .pwa-ios-system-gap .app-shell.sidebar-collapsed>aside:not(.mobile-nav-expanded){
    background:var(--pwa-mobile-nav-surface)!important;
    backdrop-filter:none!important;
  }

  .pwa-standalone .app-shell>aside.mobile-nav-expanded,
  .pwa-standalone .app-shell.sidebar-collapsed>aside.mobile-nav-expanded{
    position:absolute!important;
    inset:auto 0 0!important;
    margin:0!important;
  }

  .pwa-standalone .app-shell>aside:not(.mobile-nav-expanded) nav button{
    min-height:44px!important;
    padding-top:3px!important;
    padding-bottom:3px!important;
  }
}

@media(max-width:520px){
  .pwa-standalone .saas-auth,
  .pwa-standalone .login-shell{
    padding-top:var(--pwa-safe-top)!important;
    padding-right:var(--pwa-safe-right)!important;
    padding-bottom:var(--pwa-effective-safe-bottom)!important;
    padding-left:var(--pwa-safe-left)!important;
  }

  .pwa-standalone .login-home{
    min-height:calc(100dvh - var(--pwa-safe-top) - var(--pwa-effective-safe-bottom));
  }
}

@media(max-width:760px){
  .pwa-standalone .private-shell{
    margin-top:var(--pwa-safe-top);
    margin-right:var(--pwa-safe-right);
    margin-bottom:var(--pwa-effective-safe-bottom);
    margin-left:var(--pwa-safe-left);
  }
}

@media(display-mode:standalone) and (max-width:700px){
  /* La bande hors DOM reprend cette couleur au prochain lancement de la PWA. */
  html,body{background:var(--pwa-mobile-nav-surface,#faf2f9)}
  #app{background:var(--brain-canvas,#f4eef5)}
}
