/* Compact, safe-area aware dialogs for iOS and Android browser/PWA shells. */
:root {
  --pegas-dialog-safe-top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px));
  --pegas-dialog-safe-right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px));
  --pegas-dialog-safe-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  --pegas-dialog-safe-left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px));
}

.dialog-backdrop:not(.form-dialog-backdrop):not(.bottom-nav-folder-backdrop) {
  place-items: center;
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: var(--pegas-dialog-safe-top) var(--pegas-dialog-safe-right)
    var(--pegas-dialog-safe-bottom) var(--pegas-dialog-safe-left) !important;
}

.dialog-backdrop:not(.form-dialog-backdrop) > .dialog {
  box-sizing: border-box;
  width: min(100%, 430px);
  max-height: min(84dvh, 680px);
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
  scrollbar-gutter: stable;
}

.dialog-backdrop:not(.bottom-nav-folder-backdrop) .dialog-close {
  box-sizing: border-box;
  min-width: 38px;
  min-height: 38px;
  touch-action: manipulation;
}

/* Profile > Bottom navigation: compact composer instead of a full-height sheet. */
#bottomNavDialog {
  z-index: 2510;
}

#bottomNavDialog > .bottom-nav-dialog {
  max-height: min(78dvh, 650px);
  padding: 20px 17px max(17px, calc(env(safe-area-inset-bottom, 0px) + 12px));
}

#bottomNavDialog .bottom-nav-dialog-close {
  top: 10px !important;
  right: 10px !important;
  width: 38px;
  height: 38px;
}

#bottomNavDialog h2 {
  margin-right: 46px;
}

#bottomNavLayoutList {
  max-height: min(20dvh, 170px);
  overflow: hidden auto;
  overscroll-behavior: contain;
}

#bottomNavOptions {
  max-height: min(26dvh, 220px);
}

#bottomNavGroupDialog > .bottom-nav-group-dialog {
  max-height: min(72dvh, 500px);
}

@media (max-height: 720px) {
  .dialog-backdrop:not(.form-dialog-backdrop) > .dialog {
    max-height: 80dvh;
  }

  #bottomNavDialog > .bottom-nav-dialog {
    max-height: 76dvh;
    padding-top: 17px;
  }

  #bottomNavLayoutList {
    max-height: 112px;
  }

  #bottomNavOptions {
    max-height: 150px;
  }
}

@media (max-width: 370px) {
  #bottomNavDialog > .bottom-nav-dialog {
    padding-inline: 13px;
  }

  #bottomNavDialog .bottom-nav-layout-row {
    grid-template-columns: 15px 30px minmax(0, 1fr) 26px 48px;
  }
}

body[data-theme="vision"] #bottomNavDialog > .bottom-nav-dialog,
body[data-theme="vision"] #bottomNavGroupDialog > .bottom-nav-group-dialog {
  border: 2px solid #fff;
}