body:is(.layout-cupertino, .layout-macos):not(.is-mobile),
body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-mobile {
  --background-modifier-message: var(--modal-background);
  --modal-background: rgb(from var(--background-primary-alt) r g b / 75%);

  .menu,
  .suggestion-container,
  .popover,
  .prompt,
  .modal:not(.mod-sidebar-layout) {
    backdrop-filter: var(--blur-m);
    border: none;
    background-color: var(--modal-background);
  }
  .cm-tooltip,
  .notice {
    backdrop-filter: var(--blur-sz);
    border: none;
    background-color: var(--modal-background);
  }
}

// Menu
body:is(.layout-cupertino, .layout-macos):not(.is-mobile) {
  .menu,
  .menu svg.svg-icon {
    transition: none;
  }

  .menu,
  .suggestion-container {
    .menu-item,
    .suggestion-item {
      padding: calc(4px * var(--density-modifier)) 12px;
      align-items: center;
    }
    .suggestion-item {
      min-height: 32px;
    }
    .menu-separator {
      margin: 6px 8px;
    }
  }
}

body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-mobile {
  --menu-radius: var(--modal-radius);

  .menu-scroll {
    background-color: transparent;
  }

  .menu .menu-item,
  .menu .suggestion-item,
  .suggestion-container .menu-item,
  .suggestion-container .suggestion-item {
    padding: calc(12px * var(--density-modifier)) var(--side-padding);

    &:not([class*="is-"]) .menu-item-icon {
      color: var(--text-normal);
    }
    .menu-item-icon .svg-icon {
      --icon-size: var(--icon-m);
      --icon-stroke: var(--icon-m-stroke-width);
    }
  }
}
body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-phone {
  --menu-shadow: none;

  .menu {
    margin: 8px;
    border-radius: var(--modal-radius) var(--modal-radius) calc(var(--safe-area-inset-top) - 8px) calc(var(--safe-area-inset-top) - 8px);
  }

  .menu .menu-scroll,
  .suggestion-container .menu-scroll {
    padding: 32px var(--side-padding);
  }

  .menu .menu-item {
    min-height: 48px;
  }
  .menu .menu-item:not(:last-child) {
    border-bottom: none;

    .menu-item-title {
      position: relative;
    }
    .menu-item-title::after {
      position: absolute;
      inset: auto 0 -14px;
      background-color: rgba(var(--mono-rgb-100), 0.1);
      height: var(--border-width);
      content: "";
    }
  }
  .suggestion-container .suggestion-item {
    padding: calc(12px * var(--density-modifier)) var(--side-padding);
  }

  .menu-group {
    .menu-item:not(.is-label) {
      background-color: var(--background-modifier-hover);
    }

    .menu-item.is-label + .menu-item:not(.is-label),
    .menu-item:first-child {
      border-top-left-radius: var(--radius-m);
      border-top-right-radius: var(--radius-m);
    }
    .menu-item:last-child {
      border-bottom-left-radius: var(--radius-m);
      border-bottom-right-radius: var(--radius-m);
    }
  }
}
body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-tablet {
  --menu-shadow: var(--shadow-l);

  .menu,
  .suggestion-container {
    .menu-separator {
      margin: 4px 16px;
    }
    .menu-scroll,
    .suggestion {
      padding: 8px;
    }
    .menu-item,
    .suggestion-item {
      gap: 16px;
    }
  }
}

// Modal
body:is(.layout-cupertino, .layout-macos):not(.is-mobile) {
  @keyframes modalInCupertino {
    from {
      opacity: 1;
      filter: none;
      transform: scale(0.99);
    }
  }
  .modal {
    animation: modalInCupertino var(--anim-duration-moderate) var(--anim-motion-baseline) forwards;
  }

  .modal:not(.mod-sidebar-layout) {
    .modal-title {
      width: 100%;
    }
    .modal-button-container button {
      flex: 1;
      margin: 0;
      border-radius: 100vh;
      min-height: 32px;
    }
  }
}

body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-mobile {
  --modal-header-height: var(--view-header-height);

  .modal-setting-back-button,
  .modal-close-button {
    padding: 10px;
  }

  .modal-close-button::before {
    width: var(--icon-l);
    height: var(--icon-l);
    font-size: unset;
  }
}
body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-phone {
  .modal-container.mod-confirmation .modal {
    border-radius: var(--modal-radius) var(--modal-radius) calc(var(--safe-area-inset-top) - 8px) calc(var(--safe-area-inset-top) - 8px);
  }
  .modal:not(.mod-sidebar-layout) {
    margin: 0 8px 8px;

    .modal-header {
      border-bottom: none;
    }
    .modal-content {
      padding: 0 var(--side-padding);
    }

    .modal-button-container {
      gap: 8px;
      margin-bottom: 0;
      padding: var(--side-padding);
    }
    .modal-button-container button {
      margin-top: 0;
    }

    .modal-nav-action {
      position: relative;
      background-color: var(--interactive-normal);
      margin: 0 var(--side-padding) 8px;
    }

    button:last-child {
      margin-bottom: var(--side-padding);
    }
  }
}

// Notice & Tooltip
body:is(.layout-cupertino, .layout-macos):not(.is-mobile),
body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-mobile {
  .notice-container {
    display: flex;
    top: unset;
    bottom: var(--safe-area-inset-bottom);
    flex-direction: column;
    gap: 8px;
    overflow: visible;
  }
  .notice {
    margin-bottom: 0;
    box-shadow: var(--shadow-l);
    border-radius: var(--radius-m);
    padding: calc(16px * var(--density-modifier)) var(--side-padding);
    color: var(--text-muted);
  }

  .tooltip {
    --background-modifier-message: var(--background-primary);
    color: var(--text-muted);
    border-radius: var(--radius-m);
  }
}
body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-mobile {
  .notice {
    margin-bottom: 0;
    box-shadow: var(--shadow-xs);
    border-radius: var(--radius-m);
    padding: calc(16px * var(--density-modifier)) var(--side-padding);
    color: var(--text-muted);
  }
}

// Drag ghost
body:is(.layout-cupertino, .layout-macos):not(.is-mobile) {
  --drag-ghost-background: var(--background-primary);
  --drag-ghost-text-color: var(--text-normal);

  .drag-ghost {
    box-shadow: var(--shadow-l);
    padding: 8px 12px;
    border-radius: var(--radius-m);
  }
}
