/* Fotor Photo Editor 1.0.280 — stage 2.6: safe area and software keyboard. */

@media (max-width: 768px) {
  /* The permanent bottom navigation owns the device safe area. */
  #fotor-root .editor-shell.is-mobile .left-rail {
    height: calc(var(--m-rail-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell.is-mobile:not(.sg-mobile-panel-collapsed) .mtool-top-controls {
    transform: translateY(calc(-1 * env(safe-area-inset-bottom, 0px))) !important;
  }

  /* While typing, background editor chrome must not compete with the focused
     form. The active dialog is sized to the real visual viewport below. */
  body.sg-editor-keyboard-open #fotor-root .editor-shell.is-mobile .left-rail,
  body.sg-editor-keyboard-open #fotor-root .editor-shell.is-mobile .left-panel,
  body.sg-editor-keyboard-open #fotor-root .editor-shell.is-mobile .mtool-top-controls,
  body.sg-editor-keyboard-open #fotor-root .editor-shell.is-mobile .mobile-gallery-strip,
  body.sg-editor-keyboard-open #fotor-root .editor-shell.is-mobile .ws-float-controls,
  body.sg-editor-keyboard-open > .sg-mobile-preset-active-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.sg-editor-keyboard-open #fotor-root .agent-popup-overlay,
  body.sg-editor-keyboard-open #fotor-root .compact-modal-overlay,
  body.sg-editor-keyboard-open #fotor-root .sg-prompt-sheet,
  body.sg-editor-keyboard-open #fotor-root .hair-color-modal-backdrop,
  body.sg-editor-keyboard-open #fotor-root .sg-add-person-prompt-backdrop,
  body.sg-editor-keyboard-open > .hair-color-modal-backdrop,
  body.sg-editor-keyboard-open > .sg-add-person-prompt-backdrop,
  body.sg-editor-keyboard-open > .ti-mobile-prompt-backdrop {
    top: var(--sg-visual-viewport-top, 0px) !important;
    bottom: auto !important;
    height: var(--sg-visual-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--sg-visual-viewport-height, 100dvh) !important;
    box-sizing: border-box !important;
  }

  body.sg-editor-keyboard-open #fotor-root .agent-popup,
  body.sg-editor-keyboard-open #fotor-root .compact-modal,
  body.sg-editor-keyboard-open #fotor-root .sg-prompt-sheet__card,
  body.sg-editor-keyboard-open #fotor-root .hair-color-modal,
  body.sg-editor-keyboard-open #fotor-root .sg-add-person-prompt,
  body.sg-editor-keyboard-open > .hair-color-modal-backdrop .hair-color-modal,
  body.sg-editor-keyboard-open > .sg-add-person-prompt-backdrop .sg-add-person-prompt {
    max-height: calc(var(--sg-visual-viewport-height, 100dvh) - 16px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.sg-editor-keyboard-open > .ti-mobile-prompt-sheet,
  body.sg-editor-keyboard-open .ti-mobile-prompt-sheet,
  body.sg-editor-keyboard-open .ti-mobile-prompt-sheet--hot {
    top: calc(var(--sg-visual-viewport-top, 0px) + 8px) !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    width: auto !important;
    max-height: calc(var(--sg-visual-viewport-height, 100dvh) - 16px) !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    overscroll-behavior: contain !important;
  }

  body.sg-editor-keyboard-open input:focus,
  body.sg-editor-keyboard-open textarea:focus,
  body.sg-editor-keyboard-open select:focus,
  body.sg-editor-keyboard-open [contenteditable="true"]:focus {
    scroll-margin-top: 14px !important;
    scroll-margin-bottom: 82px !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  body.sg-editor-keyboard-open #fotor-root .left-rail,
  body.sg-editor-keyboard-open #fotor-root .left-panel,
  body.sg-editor-keyboard-open #fotor-root .mtool-top-controls {
    transition: none !important;
  }
}