/**
 * Photo grid customizer – mobile floating customize bar.
 * Desktop keeps the original in-flow purchase flow untouched.
 */

/* While this app's customize / song / crop dialog is open, keep the chat
   button and the back-to-top control out of the overlay. The class is only
   set for this app's own dialog, never for other popups. */
body.mgc-pgc-popup-open .sf-custom-circleChatButton,
body.mgc-pgc-popup-open #totop {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 749px) {
  /* Only the real bar height is reserved at the end of the page. */
  body.mgc-pgc-floating {
    padding-bottom: var(--mgc-pgc-float-space, 0px);
  }

  /* Chat button and back-to-top are stacked above the customize bar, each with
     its own offset so they never cover each other. */
  body.mgc-pgc-floating .sf-custom-circleChatButton {
    bottom: calc(var(--mgc-pgc-float-space, 0px) + 14px) !important;
  }

  body.mgc-pgc-floating #totop {
    bottom: calc(var(--mgc-pgc-float-space, 0px) + 14px + 56px) !important;
  }

  /* The original in-flow slot must not keep a large empty placeholder. */
  .mgc-pgc-float-host {
    height: 0 !important;
    min-height: 0 !important;
    margin-block: 0 !important;
    padding-block: 0 !important;
  }

  .mgc-pgc-float-host > meowgic-photo-grid-customizer-block {
    display: block;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* White fixed bar flush with the bottom edge, safe-area aware. */
  .mgc-pgc-float-entry {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 105;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    pointer-events: none;
  }

  /* The customize button fills the bar's usable width. */
  .mgc-pgc-float-entry > button {
    pointer-events: auto;
    width: 100% !important;
    max-width: none !important;
  }

  /* Hidden while the customize, song or crop popup is open. */
  .mgc-pgc-float-entry.mgc-pgc-float-hidden {
    visibility: hidden;
    pointer-events: none;
  }
}