/* Shared viewport geometry is loaded after page styling. Keep the CSS-only
   bottom anchor as fallback; JS measures the visible viewport and real height. */
@media (max-width: 760px) {
  body > .bottom-navigation[data-viewport-dock],
  [data-phone-search-dock][data-viewport-dock],
  .list-search-panel[data-viewport-dock]:not([hidden]) {
    top: calc(var(--phone-viewport-bottom) - var(--phone-dock-height) - var(--phone-dock-clearance, 0px)) !important;
    bottom: auto !important;
  }

  [data-phone-search-dock] {
    --phone-dock-clearance: calc(0.9rem + env(safe-area-inset-bottom));
  }

  body:has(> .bottom-navigation) [data-phone-search-dock] {
    --phone-dock-clearance: calc(var(--bottom-navigation-mobile-height) + 0.65rem);
  }

  .list-search-panel:not([hidden]) {
    /* Match the dock containing block, excluding a classic scrollbar. */
    width: calc(100% - 1.5rem);
  }

  .list-search-panel {
    --phone-dock-clearance: calc(5rem + env(safe-area-inset-bottom));
  }

  body:has(> .bottom-navigation) .list-search-panel {
    --phone-dock-clearance: calc(var(--bottom-navigation-mobile-height) + 4.7rem);
  }
}