.modal-backdrop { padding: 10px; overflow: auto; }
.modal-backdrop > .modal {
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal .modal-drag-handle {
  display: block; position: sticky; top: -1px; z-index: 3;
  width: calc(100% - 32px); margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid #dbe5f3; border-radius: 8px; background: #f0f5fc;
  color: #536b8b; font: inherit; font-size: 12px; text-align: left;
  cursor: move; touch-action: none; user-select: none; -webkit-user-select: none;
}
.modal .modal-actions {
  position: sticky; bottom: -1px; z-index: 2; background: white;
  padding: 10px 0; flex-wrap: wrap;
}
@media (max-width: 600px), (max-height: 600px) {
  .modal-backdrop > .modal { padding: 16px; }
}