/* Solid phone dock (v1): a full-bleed opaque bar pinned to the bottom edge, like
   Instagram's tab bar, so scrolling content is covered instead of showing through the
   floating glass pill and the 10px gaps beside it. New filename because hCDN keeps
   glass.css cached for a week and ignores query strings. */

@media (max-width: 820px) {
  html { scroll-padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

  .mtv-dock {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid rgba(0, 69, 116, .10);
    border-radius: 0;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .mtv-dock::before { display: none; }

  .mtv-dock a { border-radius: 16px; }

  .mtv-dock a.active {
    background: rgba(216, 30, 91, .07);
    box-shadow: inset 0 0 0 1px rgba(216, 30, 91, .10);
  }

  .mtv-main { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

  /* The footer sits outside .mtv-main, so it needs its own clearance under the bar. */
  .mtv-footer { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
}

/* The halted dark shelf still paints the dock as translucent glass; keep it opaque too. */
:root[data-theme="dark"] .mtv-dock {
  background: #0d1723;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: none;
}