/* 1.0.336 — shared layout hardening for the Appearance tool family. */

@media (min-width: 769px) {
  /* All nine preset-based appearance tools use one bounded layout: settings,
     one scrolling result list and the native action footer. */
  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .left-panel-body:has(> .ai-hair-page) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .ai-hair-page {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .ai-hair-top {
    position: relative !important;
    top: auto !important;
    z-index: 7 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .ai-hair-scroll {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px 18px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,.16) transparent !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .ai-hair-scroll::-webkit-scrollbar {
    width: 6px !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .ai-hair-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(255,255,255,.16) !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) :is(.ai-hair-grid, .ai-hair-tile, .ai-hair-thumb, .ai-hair-title) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .ai-hair-footer {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Any inline colour dropdown in this family stays inside the panel. This
     generalises the accepted beard and outfit fixes to future colour tools. */
  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .color-dd {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .color-dd-menu {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: min(52vh, 360px) !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .color-dd-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: min(48vh, 336px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 768px) {
  /* The same family shares the bottom preset strip on mobile. Constrain the
     strip itself instead of patching every tool separately. */
  #fotor-root .editor-shell.is-mobile
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) :is(.left-panel-body, .mobile-tool-page, .mobile-tool-content) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .mobile-preset-strip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 2px 14px 3px 6px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-padding-inline: 6px !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .mobile-preset-strip::-webkit-scrollbar {
    display: none !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .mobile-preset-card {
    flex-shrink: 0 !important;
    min-width: 0;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .mtool-popover {
    right: 0 !important;
    left: auto !important;
    width: min(280px, calc(100vw - 16px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(56dvh, 420px) !important;
    padding: 7px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .mtool-popover-item {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel:is(
    .left-panel--tool-ai-age,
    .left-panel--tool-ai-gender,
    .left-panel--tool-ai-emotion,
    .left-panel--tool-ai-body,
    .left-panel--tool-ai-pose,
    .left-panel--tool-ai-makeup,
    .left-panel--tool-ai-hair,
    .left-panel--tool-ai-beard,
    .left-panel--tool-ai-outfit
  ) .mtool-popover-item-label {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
}