/* The base body overflow-x:hidden creates an implicit vertical scroll
   container, preventing the already-sticky header from sticking. Keep the
   default launcher inside that header gap on public family pages only. */
@media (min-width: 320px) {
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded)) {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* Mobile header: compact icon controls leave a generous brand/search gap. */
@media (min-width: 320px) and (max-width: 620px) {
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .miki-music-widget {
    width: 40px;
    height: 40px;
  }
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .miki-music-widget__launcher {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .miki-music-widget:not([style*="left:"]):not([style*="inset:"]) {
    top: calc(10px + env(safe-area-inset-top));
    left: max(107px, calc(50vw - 55px));
    right: auto;
    bottom: auto;
  }

  /* The uncustomized panel starts below the launcher, not behind it. */
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .miki-music-widget__panel:not([style*="left:"]):not([style*="inset:"]) {
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    height: min(556px, calc(100dvh - 128px));
    transform: none;
  }
}

/* At the narrowest supported width the 40px gap is nearly exact. Give the
   two neighboring controls a real edge clearance without hiding breadcrumb. */
@media (min-width: 320px) and (max-width: 349px) {
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .miki-music-widget {
    width: 36px;
    height: 36px;
  }
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .miki-music-widget__launcher {
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 11px;
  }
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .miki-music-widget__launcher:focus-visible {
    outline-offset: -3px;
  }
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .miki-music-widget:not([style*="left:"]):not([style*="inset:"]) {
    top: calc(12px + env(safe-area-inset-top));
  }
}

/* Immediately above the 620px header breakpoint the desktop search consumes
   almost the entire gap. Grow it smoothly from 180px to its native 235px. */
@media (min-width: 621px) and (max-width: 730px) {
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .top-search {
    flex-basis: calc(50vw - 130.5px);
    max-width: calc(50vw - 130.5px);
  }
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .top-search span {
    white-space: nowrap;
  }
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .top-search kbd {
    display: none;
  }
}

@media (min-width: 621px) {
  body.miki-pulse.miki-page-public:has(.family-hub.dark-family:not(.is-embedded))
    .miki-music-widget:not([style*="left:"]):not([style*="inset:"]) {
    top: calc(10px + env(safe-area-inset-top));
    left: calc(50vw - 110px);
    right: auto;
    bottom: auto;
  }
}