/* MoneyBuddy v67 — consistent centered popups, except Safety Cushion.
   Loaded last. Keeps all modal open/close logic, protected screens, and Buddy design. */
:root { --mb-center-space: 16px; }

/* These are actual dialog overlays, not the Safety Cushion side drawer. */
:is(#add-entry-modal,#edit-entry-modal,#buddy-modal,#afford-modal,#bill-modal,
#all-bills-modal,#asset-modal,#debt-modal,#manage-net-worth-modal,
#customize-pot-modal,#net-worth-explainer-modal,#plant-unlock-modal,
#sign-in-modal,#onboarding-overlay,#moneyBuddySeasonModal,
#moneyBuddyPrivacyModal,#moneyBuddyFeedbackModal,#atlasUnlockModal,
#emberUnlockModal,#moneyBuddyProductModal,#buddyAgentModal) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(var(--mb-center-space),env(safe-area-inset-top))
           max(var(--mb-center-space),env(safe-area-inset-right))
           max(var(--mb-center-space),env(safe-area-inset-bottom))
           max(var(--mb-center-space),env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Cards remain vertically/horizontally centered even if legacy mobile CSS
   moves them to the viewport bottom. Keep tall forms internally scrollable. */
:is(#add-entry-modal-content,#edit-entry-modal-content,#afford-modal > div,
#bill-modal > div,#all-bills-modal > div,#asset-modal > div,#debt-modal > div,
#manage-net-worth-modal > div,#customize-pot-modal > div,
#net-worth-explainer-modal > div,#plant-unlock-modal > div,
#sign-in-modal-content,#onboarding-overlay > div,
#moneyBuddySeasonModal .season-modal-card,
#moneyBuddyPrivacyModal .privacy-card,
#moneyBuddyFeedbackModal > div,#atlasUnlockModal .atlas-reveal-card,
#emberUnlockModal .ember-modal-card,
#moneyBuddyProductModal .mb-product-modal-card,
#buddyAgentModal .mb-agent-modal-card) {
  align-self: center !important;
  margin: auto !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  top: auto !important;
  bottom: auto !important;
  max-height: calc(100dvh - (var(--mb-center-space) * 2)) !important;
  max-width: calc(100vw - (var(--mb-center-space) * 2)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}
/* Buddy Collection is intentionally taller and scrolls within its own content. */
#buddy-modal-content {
  align-self: center !important;
  margin: auto !important;
  top: auto !important;
  bottom: auto !important;
  height: min(88dvh,820px) !important;
  max-height: calc(100dvh - (var(--mb-center-space) * 2)) !important;
}
#buddy-modal-scroll,#buddy-modal .buddy-picker-scroll {
  min-height: 0 !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
}

/* Native <dialog> was explicitly bottom-anchored on phones and flush-left
   on some desktop breakpoints. Center it while preserving inner scrolling. */
#mbHomeBuyDialog[open] {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: min(940px,calc(100vw - var(--mb-center-space) * 2)) !important;
  max-width: calc(100vw - var(--mb-center-space) * 2) !important;
  height: fit-content !important;
  max-height: calc(100dvh - var(--mb-center-space) * 2) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#mbHomeBuyDialog .hb-scroll {
  max-height: calc(100dvh - var(--mb-center-space) * 2) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* The mobile More options also use role=dialog; center that menu rather than
   letting it float up from the bottom. Ordinary account dropdowns stay anchored. */
@media (max-width:767px) {
  :root { --mb-center-space: 12px; }
  #moneyBuddyMobileMoreLayer {
    align-items: center !important;
    justify-content: center !important;
    padding: var(--mb-center-space) !important;
    box-sizing: border-box !important;
  }
  #moneyBuddyMobileMoreSheet {
    width: min(480px,100%) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--mb-center-space) * 2) !important;
    margin: auto !important;
    padding-bottom: max(18px,env(safe-area-inset-bottom)) !important;
    border-radius: 23px !important;
    border-bottom: 1px solid rgba(27,77,62,.08) !important;
    box-shadow: 0 22px 65px -24px rgba(18,63,49,.5) !important;
    transform: translateY(15px) scale(.98) !important;
    transition: transform .24s ease,opacity .24s ease !important;
  }
  #moneyBuddyMobileMoreLayer.is-open #moneyBuddyMobileMoreSheet {
    transform: translateY(0) scale(1) !important;
  }
  #mbHomeBuyDialog[open] { border-radius: 21px !important; }
  #buddy-modal-content {
    height: min(88dvh,780px) !important;
    max-height: calc(100dvh - var(--mb-center-space) * 2) !important;
  }
}
@media (max-height:550px) {
  :root { --mb-center-space: 8px; }
  #buddy-modal-content { height: calc(100dvh - 16px) !important; }
}
@media (prefers-reduced-motion:reduce) {
  #moneyBuddyMobileMoreSheet { transition:none!important; }
}

/* The feedback layer had its own stronger mobile bottom-sheet rules and
   narrower shell, so explicitly put that true dialog in the center. */
html body #moneybuddyFeedbackModal:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--mb-center-space) !important;
  box-sizing: border-box !important;
}
html body #moneybuddyFeedbackModal:not(.hidden) > div {
  margin: auto !important;
  align-self: center !important;
  width: min(560px,calc(100vw - var(--mb-center-space) * 2)) !important;
  max-width: calc(100vw - var(--mb-center-space) * 2) !important;
  max-height: calc(100dvh - var(--mb-center-space) * 2) !important;
  overflow-y: auto !important;
}