/* Fotor Photo Editor 1.0.167 — unified mobile popup design layer. */

@media (max-width: 768px) {
  /* The selected-preset helper must never sit above a modal. */
  body.sg-editor-modal-open > .sg-mobile-preset-active-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ----- Unified modal stacking ----- */
  #fotor-root .sg-prompt-sheet,
  #fotor-root .agent-popup-overlay,
  #fotor-root .compact-modal-overlay,
  #fotor-root .hair-color-modal-backdrop,
  #fotor-root .sg-add-person-prompt-backdrop,
  body > .hair-color-modal-backdrop,
  body > .sg-add-person-prompt-backdrop {
    z-index: 2147483200 !important;
  }

  .sg-mobile-swap-dismiss-layer {
    z-index: 2147483198 !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap {
    z-index: 2147483201 !important;
  }

  /* ----- Common backdrop ----- */
  #fotor-root .sg-prompt-sheet__backdrop,
  #fotor-root .agent-popup-overlay,
  #fotor-root .compact-modal-overlay,
  #fotor-root .hair-color-modal-backdrop,
  #fotor-root .sg-add-person-prompt-backdrop,
  body > .hair-color-modal-backdrop,
  body > .sg-add-person-prompt-backdrop,
  .sg-mobile-swap-dismiss-layer {
    background: rgba(3, 5, 9, .74) !important;
    -webkit-backdrop-filter: blur(12px) saturate(.95) !important;
    backdrop-filter: blur(12px) saturate(.95) !important;
  }

  /* ----- Shared card language ----- */
  #fotor-root .sg-prompt-sheet__card,
  #fotor-root .agent-popup,
  #fotor-root .compact-modal,
  #fotor-root .hair-color-modal,
  #fotor-root .sg-add-person-prompt,
  body > .hair-color-modal-backdrop .hair-color-modal,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt,
  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap {
    border: 1px solid rgba(255,255,255,.11) !important;
    background: #0d0f13 !important;
    color: #f7f8fb !important;
    box-shadow: 0 26px 74px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  #fotor-root .sg-prompt-sheet__card,
  #fotor-root .hair-color-modal,
  body > .hair-color-modal-backdrop .hair-color-modal {
    width: calc(100vw - 20px) !important;
    max-width: 430px !important;
    max-height: min(82dvh, 680px) !important;
    padding: 14px !important;
    border-radius: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  #fotor-root .sg-prompt-sheet__card {
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
  }

  /* ----- Prompt / "по описанию" windows ----- */
  #fotor-root .sg-prompt-editor,
  #fotor-root .sg-prompt-editor--sheet {
    display: grid !important;
    gap: 11px !important;
  }

  #fotor-root .sg-prompt-editor__head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 34px !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }

  #fotor-root .sg-prompt-editor__title {
    color: #f7f8fb !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    letter-spacing: -.01em !important;
  }

  #fotor-root .sg-prompt-editor__hint,
  #fotor-root .sg-prompt-note {
    color: #8f959f !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  #fotor-root .sg-prompt-editor__close,
  #fotor-root .hair-color-modal__close,
  body > .hair-color-modal-backdrop .hair-color-modal__close,
  #fotor-root .sg-add-person-prompt__close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.055) !important;
    color: #d9dde5 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  #fotor-root .sg-prompt-select-wrap {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #fotor-root .sg-prompt-select-wrap > span {
    display: block !important;
    margin: 0 !important;
    color: #aeb4be !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  #fotor-root .sg-prompt-select {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    background: #15171c !important;
    color: #f7f8fb !important;
    -webkit-text-fill-color: #f7f8fb !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  #fotor-root .sg-prompt-select option {
    background: #15171c !important;
    color: #fff !important;
  }

  #fotor-root .sg-prompt-select:focus {
    border-color: rgba(66,139,255,.78) !important;
    box-shadow: 0 0 0 3px rgba(47,126,247,.14) !important;
  }

  #fotor-root .sg-prompt-textarea,
  #fotor-root .sg-add-person-prompt textarea,
  #fotor-root .text-image-popup textarea {
    width: 100% !important;
    min-height: 96px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 13px !important;
    background: #080a0e !important;
    color: #f1f3f7 !important;
    -webkit-text-fill-color: #f1f3f7 !important;
    caret-color: #6ca9ff !important;
    box-shadow: inset 0 1px 8px rgba(0,0,0,.28) !important;
    font: inherit !important;
    font-size: 11px !important;
    line-height: 1.46 !important;
    outline: none !important;
  }

  #fotor-root .sg-prompt-textarea::placeholder,
  #fotor-root .sg-add-person-prompt textarea::placeholder,
  #fotor-root .text-image-popup textarea::placeholder {
    color: #676d77 !important;
    -webkit-text-fill-color: #676d77 !important;
    opacity: 1 !important;
  }

  #fotor-root .sg-prompt-textarea:focus,
  #fotor-root .sg-add-person-prompt textarea:focus,
  #fotor-root .text-image-popup textarea:focus {
    border-color: rgba(72,145,255,.8) !important;
    box-shadow: 0 0 0 3px rgba(47,126,247,.13), inset 0 1px 8px rgba(0,0,0,.24) !important;
  }

  #fotor-root .sg-prompt-chip {
    min-height: 31px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 999px !important;
    background: #17191e !important;
    color: #c9cdd5 !important;
    font-size: 10px !important;
    font-weight: 750 !important;
  }

  #fotor-root .sg-prompt-chip.active {
    border-color: rgba(68,143,255,.76) !important;
    background: rgba(47,126,247,.15) !important;
    color: #fff !important;
  }

  #fotor-root .sg-prompt-sheet-apply,
  #fotor-root .hair-color-modal__apply,
  body > .hair-color-modal-backdrop .hair-color-modal__apply,
  #fotor-root .sg-add-person-prompt__run {
    width: 100% !important;
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #2f7df6 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  #fotor-root .sg-prompt-sheet-apply:disabled,
  #fotor-root .hair-color-modal__apply:disabled,
  #fotor-root .sg-add-person-prompt__run:disabled {
    opacity: .42 !important;
  }

  /* ----- Hair color popup ----- */
  #fotor-root .hair-color-modal__header,
  body > .hair-color-modal-backdrop .hair-color-modal__header {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }

  #fotor-root .hair-color-modal__title,
  body > .hair-color-modal-backdrop .hair-color-modal__title {
    color: #f7f8fb !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  #fotor-root .hair-color-modal__hint,
  body > .hair-color-modal-backdrop .hair-color-modal__hint {
    color: #8f959f !important;
    font-size: 10px !important;
  }

  #fotor-root .hair-color-modal__grid,
  body > .hair-color-modal-backdrop .hair-color-modal__grid {
    gap: 7px !important;
  }

  #fotor-root .hair-color-modal__swatch,
  body > .hair-color-modal-backdrop .hair-color-modal__swatch {
    min-height: 39px !important;
    height: 39px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 11px !important;
    background: #17191e !important;
    color: #e7e9ed !important;
    font-size: 10px !important;
    font-weight: 750 !important;
  }

  #fotor-root .hair-color-modal__swatch.active,
  body > .hair-color-modal-backdrop .hair-color-modal__swatch.active {
    border-color: rgba(72,145,255,.78) !important;
    background: rgba(47,126,247,.15) !important;
    box-shadow: inset 0 0 0 1px rgba(72,145,255,.08) !important;
  }

  #fotor-root .hair-color-modal__rgb,
  body > .hair-color-modal-backdrop .hair-color-modal__rgb {
    margin-top: 10px !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
    background: #111318 !important;
  }

  /* ----- Add person prompt popup ----- */
  #fotor-root .sg-add-person-prompt-backdrop,
  body > .sg-add-person-prompt-backdrop {
    align-items: end !important;
    padding: 10px !important;
  }

  #fotor-root .sg-add-person-prompt-backdrop > div,
  body > .sg-add-person-prompt-backdrop > div {
    width: 100% !important;
    max-width: 430px !important;
    max-height: min(86dvh, 720px) !important;
  }

  #fotor-root .sg-add-person-prompt,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt {
    max-height: min(86dvh, 720px) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  #fotor-root .sg-add-person-prompt__header,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__header {
    min-height: 52px !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: #111318 !important;
  }

  #fotor-root .sg-add-person-prompt__back,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__back {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 10px !important;
    background: #191b20 !important;
    color: #e2e5eb !important;
    font-size: 10px !important;
  }

  #fotor-root .sg-add-person-prompt__scroll,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__scroll {
    padding: 10px !important;
    background: #0d0f13 !important;
  }

  #fotor-root .sg-add-person-prompt__group-title,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__group-title {
    color: #8f959f !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .05em !important;
  }

  #fotor-root .sg-add-person-prompt__preset-grid,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset-grid {
    gap: 7px !important;
  }

  #fotor-root .sg-add-person-prompt__preset,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset {
    min-height: 42px !important;
    padding: 6px 7px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 11px !important;
    background: #17191e !important;
    color: #e8eaee !important;
    box-shadow: none !important;
  }

  #fotor-root .sg-add-person-prompt__preset.active,
  #fotor-root .sg-add-person-prompt__preset[aria-pressed="true"],
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset.active,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset[aria-pressed="true"] {
    border-color: rgba(68,143,255,.78) !important;
    background: rgba(47,126,247,.15) !important;
  }

  #fotor-root .sg-add-person-prompt__preset-icon,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: rgba(47,126,247,.12) !important;
  }

  #fotor-root .sg-add-person-prompt__footer,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__footer {
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    background: #111318 !important;
  }

  /* ----- Text image / Agent popup shell ----- */
  #fotor-root .agent-popup-overlay {
    inset: 0 !important;
    bottom: 0 !important;
    padding: 10px !important;
    align-items: flex-end !important;
  }

  #fotor-root .agent-popup {
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    max-height: min(88dvh, 760px) !important;
    border-radius: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  #fotor-root .text-image-popup button,
  #fotor-root .agent-popup button {
    font-family: inherit !important;
  }

  #fotor-root .text-image-popup select,
  #fotor-root .agent-popup select {
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 11px !important;
    background-color: #15171c !important;
    color: #f7f8fb !important;
    -webkit-text-fill-color: #f7f8fb !important;
  }

  /* ----- Legacy preset modal: remove the old violet demo look. ----- */
  #fotor-root .compact-modal-overlay {
    align-items: flex-end !important;
    padding: 10px !important;
  }

  #fotor-root .compact-modal {
    width: 100% !important;
    height: auto !important;
    max-height: min(88dvh, 760px) !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  #fotor-root .compact-modal .modal-top-bar {
    min-height: 52px !important;
    padding: 9px 11px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: #111318 !important;
  }

  #fotor-root .compact-modal .modal-header h2 {
    color: #f7f8fb !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #fotor-root .compact-modal .preset-count {
    padding: 3px 7px !important;
    border: 1px solid rgba(72,145,255,.24) !important;
    border-radius: 999px !important;
    background: rgba(47,126,247,.1) !important;
    color: #9ec6ff !important;
    font-size: 9px !important;
  }

  #fotor-root .compact-modal .close-btn {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.055) !important;
    color: #d9dde5 !important;
    transform: none !important;
  }

  #fotor-root .compact-modal .search-container {
    padding: 9px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  #fotor-root .compact-modal .search-container input {
    min-height: 40px !important;
    padding: 0 38px 0 11px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 11px !important;
    background: #15171c !important;
    color: #f7f8fb !important;
  }

  #fotor-root .compact-modal .presets-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  #fotor-root .compact-modal .preset-card {
    min-height: 88px !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 12px !important;
    background: #17191e !important;
    color: #e8eaee !important;
    transform: none !important;
    box-shadow: none !important;
  }

  #fotor-root .compact-modal .preset-card.selected {
    border-color: rgba(68,143,255,.8) !important;
    background: rgba(47,126,247,.14) !important;
    box-shadow: inset 0 0 0 1px rgba(68,143,255,.09) !important;
  }

  #fotor-root .compact-modal .card-icon {
    width: 34px !important;
    height: 34px !important;
    margin-bottom: 6px !important;
    border-radius: 10px !important;
    background: rgba(47,126,247,.1) !important;
    font-size: 18px !important;
  }

  #fotor-root .compact-modal .card-title {
    color: #f1f3f7 !important;
    font-size: 10px !important;
    font-weight: 750 !important;
  }

  /* ----- Face swap popup shell ----- */
  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap {
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    max-height: min(90dvh, 760px) !important;
    border-radius: 20px !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .left-panel-header {
    min-height: 52px !important;
    flex-basis: 52px !important;
    padding: 8px 9px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: #111318 !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .left-panel-header .lp-title {
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .left-panel-header .lp-subtitle {
    color: #8f959f !important;
    font-size: 9px !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .lp-back,
  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .lp-close {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.055) !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-tool-content--swap .ai-hair-top,
  #fotor-root .editor-shell.is-mobile .mobile-tool-content--swap .ai-hair-footer {
    background: #0d0f13 !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-tool-content--swap .ai-refs,
  #fotor-root .editor-shell.is-mobile .mobile-tool-content--swap label {
    border: 1px solid rgba(255,255,255,.08) !important;
    background: #15171c !important;
    box-shadow: none !important;
  }
}