/*
 * Haitian Corner PWA composer safe area — v1
 */

/*
 * The first DIV inside #composerModal is the blue
 * Create Post header.
 */
#composerModal > div:first-of-type {
  padding-top:
    calc(
      env(safe-area-inset-top, 0px) + 12px
    ) !important;

  padding-right: 16px !important;
  padding-bottom: 12px !important;
  padding-left: 16px !important;

  min-height:
    calc(
      58px + env(safe-area-inset-top, 0px)
    ) !important;

  box-sizing: border-box !important;
}

/* Give the close control a reliable iPhone tap target. */
#composerModal > div:first-of-type >
button:first-of-type {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin-left: -6px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/*
 * Ensure the icon itself cannot intercept the button tap.
 */
#composerModal > div:first-of-type >
button:first-of-type * {
  pointer-events: none !important;
}

/* Preserve a usable Post button tap target. */
#composerModal #postSubmitBtn {
  min-height: 40px !important;
  position: relative !important;
  z-index: 5 !important;
  touch-action: manipulation !important;
}