/* ACE OS 2.8.13: paint the iOS safe area before React mounts and keep it continuous. */
@media (max-width: 760px), (max-width: 1180px) and (pointer: coarse) {
  :root {
    --ace-mobile-safe-backdrop:
      linear-gradient(
        154deg,
        rgba(255, 231, 241, 0.3) 0%,
        rgba(241, 251, 247, 0.28) 28%,
        rgba(248, 251, 254, 0.2) 52%,
        rgba(237, 246, 252, 0.3) 76%,
        rgba(255, 237, 243, 0.22) 100%
      ),
      linear-gradient(180deg, #fcfcfd 0%, #f8fbfa 46%, #f4f8fb 100%);
  }

  html,
  body,
  #root {
    min-height: 100dvh !important;
    background-color: #fcfcfd !important;
    background-image: var(--ace-mobile-safe-backdrop) !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-size: 100vw 100dvh !important;
  }

  html body #root .app-shell {
    min-height: 100dvh !important;
  }

  html body #root .app-shell::before {
    background: var(--ace-mobile-safe-backdrop) !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-size: 100vw 100dvh !important;
  }

  html body #root .app-shell.app-shell::after {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    display: block !important;
    height: max(env(safe-area-inset-top), 1px) !important;
    background: var(--ace-mobile-safe-backdrop) !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-size: 100vw 100dvh !important;
    pointer-events: none !important;
  }

  html[data-ace-theme]:not([data-ace-theme="light"]),
  html[data-ace-theme]:not([data-ace-theme="light"]) body,
  html[data-ace-theme]:not([data-ace-theme="light"]) #root {
    background: #000000 !important;
  }

  html[data-ace-theme]:not([data-ace-theme="light"]) body #root .app-shell::before,
  html body #root .app-shell.app-shell.is-dark-mode::after {
    background: #000000 !important;
  }
}