.f24-client-modal-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
  padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
  padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
}

.f24-client-modal-panel {
  max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: auto;
}

.f24-client-modal-actions button {
  min-height: 44px;
}

@media (max-width: 640px) {
  .f24-client-modal-overlay {
    align-items: flex-end !important;
  }

  .f24-client-modal-panel {
    width: 100% !important;
    max-height: calc(100dvh - max(0.5rem, env(safe-area-inset-top)) - max(0.5rem, env(safe-area-inset-bottom))) !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
  }

  .f24-client-modal-actions {
    flex-direction: column-reverse !important;
  }

  .f24-client-modal-actions button {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f24-client-modal-panel {
    animation: none !important;
  }
}