.modal {
  display: flex;
  flex-direction: column;
  flex: 1;
  pointer-events: auto;
  border: var(--expo-router-modal-border, none);
  box-sizing: border-box;
  overflow: auto;
  will-change: transform;
}

.overlay {
  position: fixed;
  inset: 0;
  background-color: var(--expo-router-modal-overlay-background, rgba(0, 0, 0, 0.25));
}

@media (min-width: 768px) {
  .modal {
    position: relative;
    z-index: 50;
    /* iOS 26 modal dimensions: 83% width with max 936px, 79% height with max 586px */
    width: var(--expo-router-modal-width, 83vw);
    min-width: var(--expo-router-modal-min-width, auto);
    /* Max width follows iOS 26 specifications */
    max-width: var(--expo-router-modal-max-width, min(936px, 83vw));
    /* iOS 26 height: 79% with max 586px, accounting for viewport padding */
    height: var(--expo-router-modal-height, 79dvh);
    max-height: min(var(--expo-router-modal-height, min(586px, 79dvh)), calc(100dvh - 2rem));
    /* Ensure modal retains a reasonable minimum but never bigger than viewport */
    min-height: min(var(--expo-router-modal-min-height, var(--expo-router-modal-height, min(586px, 79dvh))), calc(100dvh - 2rem));
    /*
      It is super expensive to calculate the shadow with box-shadow, so we have to use filter instead.
      Do not change this to box-shadow. Box-shadow caused an INP of 600ms on the modal.
    */
    filter: var(--expo-router-modal-shadow, drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)));
    overflow: auto;
    outline: none;
  }

  .modalWrap>.modal {
    pointer-events: auto;
  }
}

.drawerContent {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  outline: none;
}

body>.transparentDrawerContent {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  outline: none;
  animation: none;
  animation-name: none;
}

@media (min-width: 768px) {
  .drawerContent {
    max-height: 100%;
    pointer-events: box-none;
  }
}

.modal::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.modal::-webkit-scrollbar-thumb {
  background: transparent;
}

.modalBody {
  display: flex;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;
}

/* Ensure bottom sheets (inside drawerContent) can shrink to any detent */
.drawerContent .modal[data-presentation='formSheet'],
.drawerContent .modal[data-presentation='containedModal'] {
  /* Reset inherited centering */
  position: relative;
  transform: none;
  box-shadow: none;
  filter: none;
  border-radius: inherit;
  min-height: auto;
  max-height: none;
}

/* Form-sheet style (snap-point based) should be full width */
.drawerContent .modal[data-presentation='formSheet'],
.drawerContent .modal[data-presentation='containedModal'] {
  width: 100%;
  max-width: none;
}

/* Regular modal keeps desktop max-width for nicer look */
.drawerContent .modal[data-presentation='modal'],
.drawerContent .modal[data-presentation='fullScreenModal'] {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Use the same sizing variables as the primary desktop rule - iOS 26 dimensions */
  width: var(--expo-router-modal-width, 83vw);
  min-width: var(--expo-router-modal-min-width, auto);
  max-width: var(--expo-router-modal-max-width, min(936px, 83vw));
  margin: 0;
  /*
    It is super expensive to calculate the shadow with box-shadow, so we have to use filter instead.
    Do not change this to box-shadow. Box-shadow caused an INP of 600ms on the modal.
  */
  filter: var(--expo-router-modal-shadow, drop-shadow(0px 25px 50px rgba(0, 0, 0, 0.3)));
  border-radius: var(--expo-router-modal-border-radius, 24px);
}

.srOnly {
  display: none;
}