/* 1.0.316 — visual counterparts for React-safe attributes and body portals. */
@media (min-width: 769px) {
  #fotor-root .editor-shell:not(.is-mobile) [data-sg-disabled-reason].sg-action-has-reason::before {
    content: attr(data-sg-disabled-reason);
    display: block;
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 6px;
    color: rgba(196,205,218,.82);
    font: 650 11px/1.3 Inter, sans-serif;
    text-align: right;
  }

  #fotor-root .editor-shell:not(.is-mobile) .fc-btn--fit[data-sg-fit-label]::after {
    content: attr(data-sg-fit-label);
    display: inline;
    font-size: 11px;
    font-weight: 760;
    line-height: 1;
  }

  #fotor-root .editor-shell:not(.is-mobile) .sg306-create-note p[data-sg-note] {
    font-size: 0 !important;
  }
  #fotor-root .editor-shell:not(.is-mobile) .sg306-create-note p[data-sg-note]::after {
    content: attr(data-sg-note);
    font-size: 12px;
    line-height: 1.45;
  }

  body > .sg316-desktop-pan-hint {
    position: fixed;
    z-index: 2147482000;
    max-width: 330px;
    padding: 9px 12px;
    border: 1px solid rgba(91,157,241,.3);
    border-radius: 10px;
    background: rgba(13,18,25,.96);
    color: rgba(234,241,250,.94);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    font: 650 12px/1.35 Inter, sans-serif;
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  #fotor-root .editor-shell.is-mobile [data-sg-disabled-reason].sg-action-has-reason {
    position: relative !important;
    overflow: visible !important;
  }
  #fotor-root .editor-shell.is-mobile [data-sg-disabled-reason].sg-action-has-reason::before {
    content: attr(data-sg-disabled-reason);
    position: absolute;
    right: 7px;
    bottom: calc(100% + 6px);
    z-index: 2;
    max-width: min(74vw, 280px);
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    background: rgba(10,14,19,.94);
    color: rgba(222,229,238,.9);
    font: 650 10.5px/1.3 Inter, sans-serif;
    pointer-events: none;
  }

  #fotor-root .editor-shell.is-mobile .mtool-top-btn--apply[data-sg-action-label]::before {
    content: attr(data-sg-action-label);
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 780;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #fotor-root .editor-shell.is-mobile .fc-btn--fit.sg-mobile-fit-view[data-sg-fit-label]::after {
    content: attr(data-sg-fit-label);
    display: inline;
    font-size: 10px;
    font-weight: 760;
    line-height: 1;
  }

  #fotor-root .text-image-page .ti-field--prompt > span[data-sg-prompt-label] {
    font-size: 0 !important;
  }
  #fotor-root .text-image-page .ti-field--prompt > span[data-sg-prompt-label]::after {
    content: attr(data-sg-prompt-label);
    font-size: 11px;
  }

  body > .sg316-mobile-panel-toggle {
    position: fixed;
    z-index: 2147482100;
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: #11161e;
    color: rgba(222,230,240,.86);
  }
  body > .sg316-mobile-panel-toggle::before {
    content: "⌄";
    font-size: 20px;
    line-height: 1;
    transform: translateY(-2px);
  }
  body > .sg316-mobile-panel-toggle[aria-expanded="false"]::before { transform: rotate(180deg) translateY(2px); }

  body.sg316-mobile-actions-ready #fotor-root .editor-shell.is-mobile .ws-top-actions > .ws-action:not(.primary) {
    display: none !important;
  }
  body > .sg316-mobile-actions {
    position: fixed;
    z-index: 2147482100;
    width: 34px;
    height: 34px;
  }
  body > .sg316-mobile-actions .sg316-more {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: #12171e;
    color: rgba(229,235,243,.84);
    font-size: 13px;
    letter-spacing: 1px;
  }
  body > .sg316-mobile-actions.is-open .sg316-more {
    border-color: rgba(73,145,241,.52);
    background: #16243a;
    color: #cfe3ff;
  }
  body > .sg316-mobile-actions .sg316-actions-popup {
    position: absolute;
    top: 41px;
    right: 0;
    width: 210px;
    padding: 6px;
    display: none;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(14,18,24,.98);
    box-shadow: 0 14px 32px rgba(0,0,0,.42);
  }
  body > .sg316-mobile-actions.is-open .sg316-actions-popup { display: grid; gap: 2px; }
  body > .sg316-mobile-actions .sg316-menu-action {
    width: 100%;
    min-height: 42px;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(235,239,245,.9);
    font: 650 12px/1.2 Inter, sans-serif;
    text-align: left;
  }
  body > .sg316-mobile-actions .sg316-menu-action--clear { color: #ffbdc5; }
}

@media (min-width: 769px) {
  body > .sg316-mobile-panel-toggle,
  body > .sg316-mobile-actions { display: none !important; }
}