/* Vizo on phones: bottom tab bar, compact header, full-width content */
@media (max-width: 760px) {
  .vz-app { flex-direction: column !important; height: 100dvh !important; }
  .vz-side {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important;
    width: 100% !important; height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: row !important; align-items: stretch !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    border-right: 0 !important; border-top: 1px solid var(--border, #2a2a2a) !important;
    background: var(--bg, #0f0f0f) !important; z-index: 1000; overflow-x: auto; overflow-y: hidden;
  }
  .vz-logo { display: none !important; }
  .vz-nav { flex-direction: row !important; flex: 1; width: auto !important; padding: 0 !important; gap: 0 !important; justify-content: space-around; }
  .vz-nav > a, .vz-side [data-vizo-apps] { flex: 1 0 auto; min-width: 60px; width: auto !important; margin: 0 !important; padding: 8px 2px !important; justify-content: center; }
  .vz-side > div[style*="flex: 1"] { display: none !important; }
  .vz-main { width: 100% !important; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .vz-header { height: 52px !important; padding: 0 10px !important; gap: 8px !important; }
  .vz-hlogo { font-size: 0 !important; gap: 0 !important; }
  .vz-search { flex: 1 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; }
  .vz-hright { gap: 2px !important; }
  .vz-content { padding: 12px !important; }
  .vz-content img, .vz-content video, .vz-content canvas { max-width: 100%; }
  /* card grids become one column, small grids two */
  .vz-content [style*="minmax(2"], .vz-content [style*="minmax(3"] { grid-template-columns: 1fr !important; }
  .vz-content [style*="minmax(1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* side-by-side layouts (watch page, live page) stack instead */
  .vz-content div[style*="display: flex"][style*="gap: 2"] { flex-wrap: wrap !important; }
  .vz-content [style*="flex-shrink: 0"][style*="width: 3"], .vz-content [style*="flex-shrink: 0"][style*="width: 4"] { width: 100% !important; }
  .vz-content [style*="min-width: 3"], .vz-content [style*="min-width: 4"] { min-width: 0 !important; }
  /* keep popups and buttons above the tab bar */
  .vz-float { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  #vp-toast, #vz-corner { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  input, textarea, select { font-size: 16px !important; } /* stops iPhone zooming in on tap */
}