/* Fotor Photo Editor 1.0.278 — Create Photo layout regression fix. */

/* Every Create Photo surface must be allowed to shrink inside its owner. */
#fotor-root .text-image-page,
#fotor-root .text-image-page > *,
#fotor-root .text-image-page .ti-hot-view,
#fotor-root .text-image-page .ti-hot-toolbar,
#fotor-root .text-image-page .ti-hot-toolbar__settings,
#fotor-root .text-image-page .ti-presets-shell,
#fotor-root .text-image-page .ti-presets-scroll,
#fotor-root .text-image-page .ti-presets-grid,
#fotor-root .text-image-page .ti-preset-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#fotor-root .text-image-page {
  width: 100% !important;
  overflow-x: hidden !important;
}

#fotor-root .text-image-page .ti-hot-view,
#fotor-root .text-image-page .ti-hot-toolbar,
#fotor-root .text-image-page .ti-presets-shell,
#fotor-root .text-image-page .ti-presets-scroll,
#fotor-root .text-image-page .ti-presets-grid {
  width: 100% !important;
}

@media (min-width: 769px) {
  /* The desktop tool lives in a narrow left panel: never size it from preset content. */
  #fotor-root .left-panel--tool-ai-text-image,
  #fotor-root .left-panel--tool-ai-text-image .left-panel-body,
  #fotor-root .left-panel--tool-ai-text-image .mobile-tool-page,
  #fotor-root .left-panel--tool-ai-text-image .mobile-tool-content {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #fotor-root .left-panel--tool-ai-text-image .text-image-page {
    height: auto !important;
    min-height: 100% !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }

  #fotor-root .left-panel--tool-ai-text-image .ti-hot-view {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
  }

  #fotor-root .left-panel--tool-ai-text-image .ti-hot-toolbar {
    display: flex !important;
    flex-direction: column !important;
  }

  #fotor-root .left-panel--tool-ai-text-image .ti-hot-toolbar__settings {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #fotor-root .left-panel--tool-ai-text-image .ti-presets-shell {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    min-height: 280px !important;
  }

  #fotor-root .left-panel--tool-ai-text-image .ti-presets-scroll {
    flex: 0 0 auto !important;
    max-height: 430px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #fotor-root .left-panel--tool-ai-text-image .ti-presets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  /* The full Create Photo popup should flow from the heading down, not fill an
     artificial 100%-height flex track that pushes its form below the viewport. */
  #fotor-root .agent-popup.text-image-popup {
    display: block !important;
    width: calc(100vw - 18px) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #fotor-root .text-image-popup .text-image-page {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  #fotor-root .text-image-popup .ti-head,
  #fotor-root .text-image-popup .ti-mode-tabs,
  #fotor-root .text-image-popup .ti-mode-note,
  #fotor-root .text-image-popup .ti-field,
  #fotor-root .text-image-popup .ti-actions-row,
  #fotor-root .text-image-popup .ti-grid,
  #fotor-root .text-image-popup .ti-generate,
  #fotor-root .text-image-popup .ti-hot-view {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  #fotor-root .text-image-popup .ti-hot-view {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
  }

  #fotor-root .text-image-popup .ti-hot-toolbar,
  #fotor-root .text-image-popup .ti-hot-toolbar__settings {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #fotor-root .text-image-popup .ti-presets-shell {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    min-height: 260px !important;
  }

  #fotor-root .text-image-popup .ti-presets-scroll {
    flex: 0 0 auto !important;
    max-height: min(46dvh, 430px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Compact editor controls use natural height as well. */
  #fotor-root .ti-mobile-generator-panel {
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 380px) {
  #fotor-root .agent-popup.text-image-popup {
    width: calc(100vw - 12px) !important;
  }
}