.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);

  display: flex;
  justify-content: center;

  padding: clamp(var(--spacing-sm), 10vh, var(--spacing-xl));
  z-index: var(--z-backdrop-modal);

  /* Always a scroll container so overscroll-behavior can absorb wheel/touch
     events and prevent the background page from scrolling. */
  overflow-y: scroll;
  overscroll-behavior: none;

  /* Hide the overlay's own scrollbar — it's only there to absorb events */
  scrollbar-width: none;
}

.overlay::-webkit-scrollbar {
  display: none;
}

/* Default width can be overridden by --modal-width from props */
.modal {
  --modal-width: 500px;

  background: var(--color-bg-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family);
  color: var(--color-fg-default);
  z-index: var(--z-modal);

  /* Responsive width: never exceed viewport */
  width: min(
    var(--modal-width),
    calc(100vw - 2 * clamp(var(--spacing-sm), 4vw, var(--spacing-lg)))
  );
  min-width: 320px;

  /* Critical: prevent “below bottom of screen”
     Prefer svh on mobile; fallback to vh. */
  max-height: calc(100svh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
  max-height: calc(100vh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));

  display: flex;
  flex-direction: column;

  /* If you want it slightly lower than top padding, keep it aligned start */
  align-self: flex-start;

  /* Helps on iOS when address bar changes */
  overscroll-behavior: contain;
}

/* Header/footer pinned; body scrolls */
.header {
  font-size: var(--font-size-md);

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: var(--spacing-md);
  padding-bottom: 0;

  /* Keeps header readable if body scrolls underneath */
  flex: 0 0 auto;
}

.header :is(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--font-weight-semibold);
}

.body {
  flex: 1 1 auto;
  overflow: auto;

  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-fg-muted);

  padding: var(--spacing-md);
  min-height: 0; /* IMPORTANT: allows flex child to actually scroll */
}

.footer {
  flex: 0 0 auto;

  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs);

  padding: var(--spacing-md);
  padding-top: 0;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contentSpacing .body > :first-child {
  margin-top: 0;
}

.contentSpacing .body > :last-child {
  margin-bottom: 0;
}