/* Sparkle buttons: every floating trigger, in every mode, lives in
     the bottom-right corner so the cluster never appears to teleport.
     Offsets respect the home-indicator/notch safe areas in landscape. */
  .sparkle-button {
    position: fixed;
    bottom: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    right: calc(20px + env(safe-area-inset-right, 0px));
    background: linear-gradient(45deg, hsl(194, 69%, 52%), hsl(254, 69%, 52%));
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, box-shadow 0.3s, opacity 150ms ease;
  }

  @media (hover: hover) {
    .sparkle-button:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
  }

  .sparkle-button:active {
    transform: scale(0.95);
  }

  /* While a modal is open the fixed triggers are inert; dim them so
     they visibly step back instead of just silently ignoring taps */
  .sparkle-button[inert] {
    opacity: 0.4;
  }

  /* Second and third slots in the cluster, shared across modes */
  #screensaverTrigger,
  #splashScreensaverTrigger {
    right: 80px;
    right: calc(80px + env(safe-area-inset-right, 0px));
  }

  #searchTrigger {
    right: 140px;
    right: calc(140px + env(safe-area-inset-right, 0px));
  }