/* 1.0.340 — final shared action system. CSS only; no React DOM changes. */

#fotor-root {
  --sg-action-height-desktop: 42px;
  --sg-action-height-mobile: 34px;
  --sg-action-radius: 9px;
  --sg-action-primary: #2f7df6;
  --sg-action-primary-border: rgba(91, 158, 255, .56);
  --sg-action-disabled-bg: #171c22;
  --sg-action-disabled-border: rgba(255, 255, 255, .065);
  --sg-action-disabled-text: rgba(163, 172, 184, .62);
}

/* All real primary actions share the same visual states. Geometry remains
   owned by the specific tool layout. */
#fotor-root :is(
  .ai-hair-run,
  .ai-correction-run,
  .ai-correction-mobile-run,
  .m-ai-apply,
  .mobile-apply-btn,
  .sg-product-run,
  .product-creative-footer > button,
  .ai-agent__run,
  .sg-add-person-prompt__run,
  .ti-generate,
  .ti-generate--hot,
  .ti-generate--popup-top,
  .hair-reference-editor__run,
  .m-native-primary,
  .mtool-top-btn--apply
) {
  box-sizing: border-box !important;
  border: 1px solid var(--sg-action-primary-border) !important;
  border-radius: var(--sg-action-radius) !important;
  background-color: var(--sg-action-primary) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease !important;
}

#fotor-root :is(
  .ai-hair-run,
  .ai-correction-run,
  .ai-correction-mobile-run,
  .m-ai-apply,
  .mobile-apply-btn,
  .sg-product-run,
  .product-creative-footer > button,
  .ai-agent__run,
  .sg-add-person-prompt__run,
  .ti-generate,
  .ti-generate--hot,
  .ti-generate--popup-top,
  .hair-reference-editor__run,
  .m-native-primary,
  .mtool-top-btn--apply
):is(:disabled, [aria-disabled="true"]) {
  border-color: var(--sg-action-disabled-border) !important;
  background-color: var(--sg-action-disabled-bg) !important;
  background-image: none !important;
  color: var(--sg-action-disabled-text) !important;
  -webkit-text-fill-color: var(--sg-action-disabled-text) !important;
  box-shadow: none !important;
  cursor: default !important;
  opacity: 1 !important;
}

#fotor-root :is(
  .ai-hair-run,
  .ai-correction-run,
  .ai-correction-mobile-run,
  .m-ai-apply,
  .mobile-apply-btn,
  .sg-product-run,
  .product-creative-footer > button,
  .ai-agent__run,
  .sg-add-person-prompt__run,
  .ti-generate,
  .ti-generate--hot,
  .ti-generate--popup-top,
  .hair-reference-editor__run,
  .m-native-primary,
  .mtool-top-btn--apply
):focus-visible {
  outline: 2px solid rgba(126, 184, 255, .92) !important;
  outline-offset: 2px !important;
}

#fotor-root :is(
  .ai-hair-run,
  .ai-correction-run,
  .ai-correction-mobile-run,
  .m-ai-apply,
  .mobile-apply-btn,
  .sg-product-run,
  .product-creative-footer > button,
  .ai-agent__run,
  .sg-add-person-prompt__run,
  .ti-generate,
  .ti-generate--hot,
  .ti-generate--popup-top,
  .hair-reference-editor__run,
  .m-native-primary,
  .mtool-top-btn--apply
):is([aria-busy="true"], .is-loading, .is-processing) {
  border-color: rgba(91, 158, 255, .34) !important;
  background-color: #245fae !important;
  color: rgba(255, 255, 255, .82) !important;
  cursor: progress !important;
}

@media (min-width: 769px) {
  #fotor-root .editor-shell:not(.is-mobile) .left-panel :is(
    .ai-hair-run,
    .ai-correction-run,
    .m-ai-apply,
    .mobile-apply-btn,
    .sg-product-run,
    .product-creative-footer > button,
    .ai-agent__run,
    .ti-generate
  ) {
    min-height: var(--sg-action-height-desktop) !important;
    max-height: none !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel :is(
    .ai-hair-footer,
    .ai-correction-footer,
    .product-creative-footer,
    .sg-product-footer
  ) {
    border-top-color: rgba(255, 255, 255, .065) !important;
    background: rgba(11, 15, 20, .98) !important;
    box-shadow: none !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel :is(
    .ai-hair-footer,
    .ai-correction-footer,
    .product-creative-footer,
    .sg-product-footer
  ) > select,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel
  .ai-correction-footer > .ai-correction-format {
    height: var(--sg-action-height-desktop) !important;
    min-height: var(--sg-action-height-desktop) !important;
    border-radius: var(--sg-action-radius) !important;
  }

  /* One quiet, readable reason above a disabled desktop action. */
  #fotor-root .editor-shell:not(.is-mobile) .left-panel .sg-action-disabled-reason,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel
  [data-sg-disabled-reason].sg-action-has-reason::before {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 2.5em !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(171, 181, 194, .76) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    box-shadow: none !important;
  }
}

@media (max-width: 768px) {
  #fotor-root .editor-shell.is-mobile .mtool-top-btn--apply {
    min-height: var(--sg-action-height-mobile) !important;
    max-height: var(--sg-action-height-mobile) !important;
    border-radius: var(--sg-action-radius) !important;
  }

  #fotor-root .editor-shell.is-mobile :is(
    .ai-correction-mobile-run,
    .adjust-mobile-apply-inline,
    .m-ai-apply,
    .mobile-apply-btn
  ) {
    min-height: var(--sg-action-height-mobile) !important;
    border-radius: var(--sg-action-radius) !important;
  }

  #fotor-root .editor-shell.is-mobile :is(
    .mobile-tool-content--swap,
    .sg-add-person-page
  ) .ai-hair-run,
  #fotor-root .agent-popup :is(
    .ai-agent__run,
    .sg-add-person-prompt__run,
    .ti-generate,
    .ti-generate--hot,
    .ti-generate--popup-top,
    .hair-reference-editor__run
  ) {
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  /* Keep the reason attached to the action and prevent long translations
     from covering the title or spilling outside the phone. */
  #fotor-root .editor-shell.is-mobile .mtool-top-group > .sg-action-disabled-reason,
  #fotor-root .editor-shell.is-mobile
  [data-sg-disabled-reason].sg-action-has-reason::before {
    right: 0 !important;
    bottom: calc(100% + 5px) !important;
    width: max-content !important;
    max-width: min(58vw, 190px) !important;
    max-height: 3.7em !important;
    padding: 5px 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 8px !important;
    background: rgba(10, 14, 19, .96) !important;
    color: rgba(222, 229, 238, .9) !important;
    font-size: 9.5px !important;
    font-weight: 650 !important;
    line-height: 1.22 !important;
    text-align: left !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .28) !important;
    pointer-events: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fotor-root :is(
    .ai-hair-run,
    .ai-correction-run,
    .ai-correction-mobile-run,
    .m-ai-apply,
    .mobile-apply-btn,
    .sg-product-run,
    .ai-agent__run,
    .sg-add-person-prompt__run,
    .ti-generate,
    .m-native-primary,
    .mtool-top-btn--apply
  ) {
    transition: none !important;
  }
}