/* Project dialogs live directly under body so page entrance transforms and
   nested scrolling containers cannot become their fixed containing block. */
body > .fy-viewport-modal-backdrop {
  --fy-modal-gutter: 16px;
  position: fixed !important;
  inset: 0 !important;
  z-index: 3000;
  display: grid !important;
  place-items: center;
  box-sizing: border-box;
  padding: var(--fy-modal-gutter) !important;
  overflow: hidden;
  overscroll-behavior: contain;
}

body > .fy-viewport-modal-backdrop > .reference-modal {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  margin: 0;
}

/* Keep transient errors and previews above the project dialog that opened them. */
body > .task-error-dialog-backdrop {
  z-index: 3001;
}
body > .reference-lightbox-backdrop {
  z-index: 3002;
}
body > .reference-modal-backdrop.reference-lightbox-backdrop:has(.custom-result-lightbox) {
  z-index: 3002 !important;
}
body > .app-dialog-backdrop:has(> .language-model-dialog) {
  z-index: 3000;
}

body > .fy-viewport-modal-backdrop > :is(.app-confirm-dialog, .project-create-modal, .resource-editor-modal) {
  max-height: calc(100vh - var(--fy-modal-gutter) * 2);
  max-height: calc(100dvh - var(--fy-modal-gutter) * 2);
}

body > .fy-viewport-modal-backdrop > .app-confirm-dialog {
  width: min(480px, 100%);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body > .fy-viewport-modal-backdrop > .app-confirm-dialog :is(h3, p, .app-dialog-error) {
  overflow-wrap: anywhere;
}

body > .fy-viewport-modal-backdrop > .app-confirm-dialog .app-confirm-actions {
  flex-wrap: wrap;
}

/* These rules intentionally do not depend on #root: the editors are portals.
   The previous root-scoped editor stylesheet and restore notices stay intact. */
body > .fy-viewport-modal-backdrop > .resource-editor-modal {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  overflow: hidden;
}

body > .fy-viewport-modal-backdrop .reference-modal-header > div {
  min-width: 0;
}

body > .fy-viewport-modal-backdrop .reference-modal-header :is(h3, p) {
  overflow-wrap: anywhere;
}

body > .fy-viewport-modal-backdrop > .resource-editor-modal > :is(.reference-modal-header, .reference-modal-footer) {
  flex: 0 0 auto;
}

body > .fy-viewport-modal-backdrop > .resource-editor-modal > .resource-editor-fields {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

body > .fy-viewport-modal-backdrop > .project-create-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body > .fy-viewport-modal-backdrop > .project-create-modal > :is(.reference-modal-header, .reference-modal-footer) {
  flex: 0 0 auto;
}

body > .fy-viewport-modal-backdrop > .project-create-modal > .form-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 560px), (max-height: 560px) {
  body > .fy-viewport-modal-backdrop {
    --fy-modal-gutter: 10px;
  }

  body > .fy-viewport-modal-backdrop > :is(.app-confirm-dialog, .project-create-modal, .resource-editor-modal) {
    padding: 18px;
  }
}