:root{--circlique-header-height:68px}
.app{padding-top:calc(var(--circlique-header-height) + env(safe-area-inset-top))!important}
.app>header{
  position:fixed!important;
  top:0!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(100%,480px)!important;
  min-height:calc(var(--circlique-header-height) + env(safe-area-inset-top))!important;
  padding-top:calc(12px + env(safe-area-inset-top))!important;
  z-index:10000!important;
  isolation:isolate;
  box-shadow:0 10px 30px rgba(0,0,0,.42)!important;
}
.app>#offlineBanner{top:calc(var(--circlique-header-height) + env(safe-area-inset-top))!important}
@media(max-width:600px){.app>header{width:100%!important}}

/* Profile dialogs must cover the fixed app header, including their close control. */
#memberPeekOverlay{
  z-index:10010!important;
  padding-top:calc(12px + env(safe-area-inset-top));
}
#memberPeekOverlay .memberPeekSheet{
  max-height:min(90dvh,calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
}
#memberPeekOverlay .memberPeekClose{
  position:sticky;
  top:0;
  z-index:2;
  float:none;
  display:block;
  margin-left:auto;
  width:44px;
  min-height:44px;
  background:#120d16;
}
@media(max-width:600px){
  #memberPeekOverlay .memberPeekSheet{
    max-height:calc(100dvh - 12px - env(safe-area-inset-top));
  }
}