/* Dialog fit — "the pop box disappears down the screen so I can't see the whole box".
   Two dialog systems are involved: the island's Tailwind overlays (Add Resource on
   Professional Plans, Message on Professional connections) and the `.hc-box` overlay.
   CAUSE: not the box height — both already cap at 85–92vh. `inset-0` and `vh` are
   measured against the LARGE viewport, which on a phone extends behind the browser
   toolbar, and these sheets are BOTTOM-ALIGNED (`items-end`). So the last ~60px,
   including the submit buttons, sat under the browser chrome. Measured at 390x844:
   the Add Resource sheet ran 156→844, flush with the large-viewport bottom.
   FIX: centre the sheet instead of pinning it to the bottom, and size it against the
   dynamic viewport so it always fits with room either side. Padding the overlay was
   tried first and still left the box 4px over — bottom-alignment keeps re-flushing it. */
#huRhythmRoot [role="dialog"][aria-modal="true"],
.hc-modal,
#hcModal{
  align-items:center !important;
  height:100vh !important;
  height:100dvh !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}
/* `.hc-modal` sets align-items:flex-end from a later rule, so the centring needs
   id + class weight to win */
html body #hcModal.hc-modal{ align-items:center !important; }
/* the box ALSO sets align-self:flex-end, which overrides the container's centring */
html body #hcModal .hc-box{ align-self:center !important; }
#huRhythmRoot [role="dialog"][aria-modal="true"] > *,
.hc-modal > .hc-box,
.hc-box{
  max-height:calc(100vh - 48px) !important;
  max-height:calc(100dvh - 48px) !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  margin-bottom:env(safe-area-inset-bottom, 0px);
}