/* Keep the body-level dock on the browser's native fixed-position path.
   June 2026 device notes: no sticky, transform follower or global overflow lock.
   Reserve the maximum safe area once; the browser updates only bottom while
   its controls move. Both button backgrounds continue through the lower inset.
   https://developer.chrome.com/docs/css-ui/edge-to-edge */
@media (max-width: 1020px) {
  :root {
    /* Some engines expose the maximum as zero while the live inset is positive. */
    --df-dock-safe-max: max(36px, env(safe-area-max-inset-bottom, 36px));
  }
  body > .dock {
    position: fixed;
    inset: auto 0 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) - var(--df-dock-safe-max));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0;
    padding: 0;
    transform: none;
    -webkit-transform: none;
    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: auto;
    transition: none;
    animation: none;
  }
  body > .dock > a {
    padding-bottom: calc(14px + var(--df-dock-safe-max));
  }
  body > .dock > a:first-child {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
  }
  body > .dock > a:last-child {
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  body:has(> .dock) {
    padding-bottom: calc(54px + var(--df-dock-safe-max));
  }
}