/* PinSeek's five masked blur layers, reversed toward the bottom dock. */
#hh-mobile-dock { display: contents; }
.hh-mobile-dock-blur { display: none; }

@media (max-width: 1023px) {
  /* One viewport-anchored dock, with the opaque safe-area nav as its last child.
     Desktop retains the existing independent player positioning. */
  #hh-mobile-dock {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    pointer-events: none;
  }
  #hh-mobile-dock > #audioPlayer,
  #hh-mobile-dock > #mobile-nav { pointer-events: auto; }

  .hh-mobile-dock-blur {
    --dock-rgb: 248 250 252;
    display: none;
    position: absolute;
    pointer-events: none;
    z-index: 49;
    left: 0;
    right: 0;
    /* Keep the blur above the opaque nav so Safari sees a solid bottom edge. */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    height: calc(76px + 32px + 64px);
    background: linear-gradient(to top, rgb(var(--dock-rgb) / .88), rgb(var(--dock-rgb) / .50) 55%, rgb(var(--dock-rgb) / 0));
  }
  .player-open .hh-mobile-dock-blur { display: block; }
  .dark .hh-mobile-dock-blur { --dock-rgb: 3 8 19; }
  .hh-mobile-dock-blur__layer {
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.12);
    backdrop-filter: blur(var(--blur)) saturate(1.12);
    -webkit-mask-image: linear-gradient(to top, #000 0 var(--solid), transparent var(--fade));
    mask-image: linear-gradient(to top, #000 0 var(--solid), transparent var(--fade));
  }
  .hh-mobile-dock-blur__layer.is--1 { --blur: 2px; --solid: 48%; --fade: 100%; }
  .hh-mobile-dock-blur__layer.is--2 { --blur: 4px; --solid: 38%; --fade: 86%; }
  .hh-mobile-dock-blur__layer.is--3 { --blur: 8px; --solid: 28%; --fade: 74%; }
  .hh-mobile-dock-blur__layer.is--4 { --blur: 16px; --solid: 18%; --fade: 62%; }
  .hh-mobile-dock-blur__layer.is--5 { --blur: 36px; --solid: 12%; --fade: 50%; }

  #hh-mobile-dock > #mobile-nav {
    position: relative;
    bottom: auto;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    --nav-background: #f8fafc;
    background: var(--nav-background) !important;
    border: 0;
  }
  .dark #hh-mobile-dock > #mobile-nav { --nav-background: #030813; }
  /* Safari samples the viewport-edge fixed surface for its browser toolbar.
     Keep the nav opaque, foremost, and free of off-screen descendants. */
  #mobile-nav { z-index: 51; }
  #mobile-nav::after { content: none; }
  /* The decorative fixed glow must not cross the browser's bottom edge. */
  body:has(#mobile-nav) #blurred-filter {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    clip-path: inset(-200px -200px 0);
  }
  #hh-mobile-dock > #audioPlayer {
    position: relative;
    bottom: auto;
    background: transparent !important;
  }
  #audioPlayer #player-container,
  #audioPlayer .hh-player-waveform { background: transparent !important; }

  /* Safari samples the bottom-center element, even when it is transparent.
     Keep toast containers away from that point so the opaque nav is sampled. */
  body:has(#mobile-nav) > .notification {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
  }

  /* low-p includes every phone; it controls waveform cost, not blur support.
     Only an explicit reduced-transparency preference disables these layers. */
  @media (prefers-reduced-transparency: reduce) {
    .hh-mobile-dock-blur__layer { display: none; }
  }
}