@media (max-width: 640px) {
  dialog[open]:not(.dialog-compact),
  [role="dialog"][aria-modal="true"]:not(.dialog-compact) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }
  :has(> [role="dialog"][aria-modal="true"]:not(.dialog-compact)) {
    padding: 0 !important;
  }
  dialog[open]:not(.dialog-compact) > .mdl-dialog__actions:first-child {
    position: sticky;
    top: 0;
    z-index: 3;
    background: inherit;
    padding-top: max(4px, env(safe-area-inset-top));
  }
  dialog[open]:not(.dialog-compact) img,
  dialog[open]:not(.dialog-compact) video,
  dialog[open]:not(.dialog-compact) iframe {
    max-width: 100%;
  }
  dialog[open] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  dialog[open] textarea,
  dialog[open] select {
    font-size: max(16px, 1em);
  }
  html:has(dialog[open]:modal:not(.dialog-compact)),
  html:has(dialog[open]:modal:not(.dialog-compact)) body {
    overflow: hidden;
  }
}