/*
 * Shared media surface.
 * Pages provide only the two palette colors. One isolated background layer is
 * blurred at its edge; content stays separate and remains unaffected.
 */
.songmuse-soft-edge-surface {
  --songmuse-soft-edge-rgb-a: var(--share-rgb-a, 255, 79, 139);
  --songmuse-soft-edge-rgb-b: var(--share-rgb-b, 47, 143, 238);
  --songmuse-soft-edge-surface-background:
    linear-gradient(
      135deg,
      rgba(var(--songmuse-soft-edge-rgb-a), 0.15) 0%,
      rgba(255, 255, 255, 0.97) 48%,
      rgba(var(--songmuse-soft-edge-rgb-b), 0.15) 100%
    );
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.songmuse-soft-edge-surface::before,
.songmuse-soft-edge-surface::after {
  position: absolute;
  pointer-events: none;
}

.songmuse-soft-edge-surface::before {
  content: none;
}

.songmuse-soft-edge-surface::after {
  content: "";
  inset: 8px;
  z-index: -1;
  border-radius: inherit;
  background: var(--songmuse-soft-edge-surface-background);
  filter: blur(5px);
  opacity: 1;
}

.song-now-playing-panel.songmuse-soft-edge-surface {
  --songmuse-soft-edge-surface-background:
    linear-gradient(
      135deg,
      rgba(var(--songmuse-soft-edge-rgb-a), 0.15) 0%,
      rgba(255, 255, 255, 0) 48%,
      rgba(var(--songmuse-soft-edge-rgb-b), 0.15) 100%
    ),
    rgba(255, 255, 255, 0.9);
}

@media (max-width: 680px) {
  .songmuse-soft-edge-surface {
    --songmuse-soft-edge-safe-inline: 24px;
    --songmuse-soft-edge-safe-block-start: 20px;
  }
}