/* Magic 1Xtra: responsive header/nav correction, 2026-11-10.
   No HTML structure, player, API, media engine or service menu destinations changed.
   The Dart Service Selector does NOT use the old global bottom navigation. */

/* Source: service_os/service_selector_screen.dart -- fix cramped selector header.
   Put action icons in stable slots and move the service-switch action to its own line.
   This is a deliberate response to overlapping controls on 1150px desktop screenshots. */
html body.mxso-home[data-mx-route="home"] .mxso-header {
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 40px 40px !important;
  column-gap:9px !important;
  row-gap:7px !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
}
html body.mxso-home[data-mx-route="home"] .mxso-header > .mxso-close {
  grid-column:1; grid-row:1; justify-self:center;
}
html body.mxso-home[data-mx-route="home"] .mxso-header > .mxso-greeting {
  grid-column:2; grid-row:1; min-width:0; overflow:hidden;
}
html body.mxso-home[data-mx-route="home"] .mxso-header > #mxsoNotification {
  grid-column:3; grid-row:1;
}
html body.mxso-home[data-mx-route="home"] .mxso-header > #mxsoAccount {
  grid-column:4; grid-row:1;
}
html body.mxso-home[data-mx-route="home"] .mxso-header > .mxso-switch-link {
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  justify-self:end !important;
  position:static !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:7px 12px !important;
  line-height:1.2 !important;
  font-size:12px !important;
  overflow:visible !important;
  white-space:nowrap;
  z-index:1;
}
html body.mxso-home[data-mx-route="home"] .mxso-header > .mxso-head-action {
  position:static !important;
  display:grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
}
html body.mxso-home[data-mx-route="home"] .mxso-header > .mxso-head-action svg {
  display:block !important;
  width:21px !important;
  height:21px !important;
}

/* Legacy global navigation is still used by certain converted routes. Give it
   correct width and legible icons. Do not force visible on TV, Marketplace,
   Service Selector, or Switch Service screens: their Dart menus remain separate. */
html body:not(.mxso-home):not(.mxso-switch-route):not(.mx-flutter-market-workspace) #app > nav#bottomNav.bottom-nav {
  box-sizing:border-box !important;
  position:fixed !important;
  bottom:max(8px,env(safe-area-inset-bottom,0px)) !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:calc(100% - 24px) !important;
  max-width:560px !important;
  min-height:66px !important;
  height:auto !important;
  padding:6px !important;
  border-radius:20px !important;
  z-index:900 !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:2px !important;
  align-items:center !important;
  justify-items:stretch !important;
}
/* The current /watch screen actually uses legacy five-way global navigation.
   Explicitly show it here on desktop, rather than letting a desktop breakpoint
   hide it while the generic desktop topbar is suppressed. */
@media (min-width:800px) {
  html body.flutter-native-route:not(.mxso-home):not(.mxso-switch-route) #app > nav#bottomNav.bottom-nav {
    display:grid !important;
    visibility:visible !important;
  }
}
html body:not(.mxso-home):not(.mxso-switch-route):not(.mx-flutter-market-workspace) #app > nav#bottomNav.bottom-nav > a {
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-width:0 !important;
  width:100% !important;
  max-width:none !important;
  min-height:52px !important;
  height:auto !important;
  padding:4px 2px !important;
  margin:0 !important;
  text-decoration:none;
}
html body:not(.mxso-home):not(.mxso-switch-route):not(.mx-flutter-market-workspace) #app > nav#bottomNav.bottom-nav > a .flutter-nav-icon,
html body:not(.mxso-home):not(.mxso-switch-route):not(.mx-flutter-market-workspace) #app > nav#bottomNav.bottom-nav > a .flutter-nav-icon svg {
  box-sizing:border-box !important;
  width:23px !important;
  height:23px !important;
  flex-shrink:0 !important;
}
html body:not(.mxso-home):not(.mxso-switch-route):not(.mx-flutter-market-workspace) #app > nav#bottomNav.bottom-nav > a small {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  font-size:11px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  text-align:center !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media(max-width:420px) {
  html body:not(.mxso-home):not(.mxso-switch-route):not(.mx-flutter-market-workspace) #app > nav#bottomNav.bottom-nav {
    width:calc(100% - 12px) !important;
    bottom:max(3px,env(safe-area-inset-bottom,0px)) !important;
    min-height:60px !important;
    padding:4px 3px !important;
    border-radius:16px !important;
  }
  html body:not(.mxso-home):not(.mxso-switch-route):not(.mx-flutter-market-workspace) #app > nav#bottomNav.bottom-nav > a small {
    font-size:10px !important;
  }
  html body.mxso-home[data-mx-route="home"] .mxso-header {
    grid-template-columns:38px minmax(0,1fr) 36px 36px !important;
    gap:5px !important;
  }
  html body.mxso-home[data-mx-route="home"] .mxso-header > .mxso-head-action {
    width:35px !important;
    min-width:35px !important;
    height:35px !important;
  }
}