/* Keep shared dialogs inside the visible phone viewport, including the keyboard. */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  :root .modal-overlay {
    inset: var(--dialog-viewport-top, 0px) 0 auto;
    width: 100%;
    height: var(--dialog-viewport-height, 100dvh);
    min-height: 0;
    padding: calc(12px + var(--dialog-safe-top, env(safe-area-inset-top, 0px)))
      calc(12px + env(safe-area-inset-right, 0px))
      calc(12px + var(--dialog-safe-bottom, env(safe-area-inset-bottom, 0px)))
      calc(12px + env(safe-area-inset-left, 0px));
    overflow: hidden;
  }

  :root .modal-overlay > .modal {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    max-height: 100%;
    padding: 18px;
    overflow: auto;
    overflow-wrap: anywhere;
    -webkit-overflow-scrolling: touch;
  }

  :root .modal-overlay > .modal .modal-title {
    gap: 12px;
    min-width: 0;
  }

  :root .modal-overlay > .modal .modal-title > h2 {
    min-width: 0;
  }

  :root .modal-overlay > .modal .modal-title > button {
    flex: 0 0 44px;
    min-width: 44px;
    min-height: 44px;
  }

  :root .modal form,
  :root .modal fieldset,
  :root .modal form > *,
  :root .modal .folder-mode > button,
  :root .modal .folder-mode > button > span {
    min-width: 0;
  }

  :root .modal fieldset {
    max-width: 100%;
    margin-inline: 0;
  }

  :root .modal input:not([type='checkbox']):not([type='radio']),
  :root .modal textarea,
  :root .modal select {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  :root .modal .folder-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root .modal .folder-mode strong {
    font-size: 14px;
  }

  :root .modal .folder-mode small {
    font-size: 12px;
  }

  :root .modal .workspace-path-input {
    min-width: 0;
    grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1fr);
  }

  :root .modal .workspace-path-input > input {
    width: 100%;
  }

  :root.dialog-keyboard-open .modal-overlay {
    align-items: stretch;
    padding-top: max(8px, var(--dialog-safe-top, env(safe-area-inset-top, 0px)));
    padding-bottom: 8px;
  }

  :root.dialog-keyboard-open .modal-overlay > .modal .modal-title {
    position: sticky;
    top: -18px;
    z-index: 2;
    margin: -18px -18px 10px;
    padding: 8px 18px;
    background: #fcfdf9;
    border-bottom: 1px solid #e6e9e3;
  }

  :root.dialog-keyboard-open .modal:has(.project-location) > form > .modal-description {
    display: none;
  }

  :root.dialog-keyboard-open .modal form {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  :root .modal .folder-mode {
    grid-template-columns: minmax(0, 1fr);
  }
}