/* Fullscreen, no scroll, transparent page */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent !important;
}

/* Hide the normal site UI */
#app > header,
#app > main {
  display: none !important;
}

/* Force the modal to be the whole page */
#modal {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
}

/* Remove dark overlay/backdrop */
#modalBackDrop,
#modal .modalBackdrop {
  display: none !important;
}

/* Make the modal panel fill the screen and become a flex container */
#modal .modalPanel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;

  /* The normal site stylesheet (overrides.css) gives the modal a big top margin
     and max-height so it sits below the topbar. In embeds that creates a dark
     "dead zone" above the canvas and can clip the preview. */
  margin: 0 !important;
  max-height: none !important;
  overflow: hidden !important;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove top/title/buttons/sidebar in embed */
#modal .modalTop,
#modal .modalBtns,
#modal .modalSide {
  display: none !important;
}

/* Make body + preview area fill remaining space */
#modal .modalBody {
  flex: 1 1 auto !important;
  display: flex !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important; /* IMPORTANT for flex children */
}

#modal .previewWrap {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  border-radius: 0 !important;
}

/* Hide status/toast text in embeds (e.g. "Preview ready.") */
#modal #mStatus,
#modal .mStatus {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Canvas fills the preview area */
#previewCanvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
} 

/* EMBED MODE: remove modal frame / red border */
#modal,
#modal * {
  outline: none !important;
}

#modal .modalPanel {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* If the red border comes from a wrapper */
#modal .modalBody,
#modal .previewWrap {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}