/* SamiMap R93 approved navigation interaction */
body.bx-r38-ui.navigation-active #menuButton,
body.bx-r38-ui.navigation-active #bxR38Toggle,
body.bx-r38-ui.navigation-active #bxR38Drawer{
  display:none!important;
}
body.bx-r38-ui.navigation-active #bxRouteCancelX{
  display:grid!important;
  place-items:center!important;
}
body.bx-r38-ui.navigation-active #driveHud{
  cursor:pointer!important;
  touch-action:manipulation!important;
}
body.bx-r38-ui.navigation-active #driveHud::after{
  content:"⌃";
  position:absolute;
  right:18px;
  top:13px;
  color:#47c8ff;
  font-size:18px;
  font-weight:900;
  line-height:1;
  pointer-events:none;
}
body.bx-r38-ui.navigation-active.bx-r93-route-open #driveHud::after{content:"⌄";}

/* route sheet */
body.bx-r38-ui.navigation-active #routePanel{
  position:fixed!important;
  z-index:2147483500!important;
  background:linear-gradient(180deg,rgba(3,17,29,.995),rgba(2,10,18,.995))!important;
  color:#fff!important;
  border:1px solid rgba(55,174,244,.25)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.5)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  overflow:hidden!important;
}
body.bx-r38-ui.navigation-active #routePanel[hidden]{display:none!important}
body.bx-r38-ui.navigation-active #routePanel>header{
  min-height:66px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:14px 18px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
body.bx-r38-ui.navigation-active #routePanel>header strong{
  font-size:22px!important;
  font-weight:900!important;
}
body.bx-r38-ui.navigation-active #closeRoutePanel{
  width:42px!important;height:42px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  color:#fff!important;
  font-size:26px!important;
}
body.bx-r38-ui.navigation-active .route-tabs{
  display:flex!important;
  gap:8px!important;
  padding:10px 14px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
body.bx-r38-ui.navigation-active .route-tabs button{
  flex:1!important;
  min-height:42px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:#9fb3c3!important;
  font-weight:800!important;
}
body.bx-r38-ui.navigation-active .route-tabs button.active{
  background:linear-gradient(180deg,#169fe9,#0b78cb)!important;
  color:#fff!important;
  border-color:rgba(75,195,255,.55)!important;
}
body.bx-r38-ui.navigation-active .route-summary-view,
body.bx-r38-ui.navigation-active .route-steps-view{
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
body.bx-r38-ui.navigation-active .route-step{
  min-height:72px!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  padding:12px 16px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
body.bx-r38-ui.navigation-active .route-step-icon{
  width:42px!important;height:42px!important;
  border-radius:14px!important;
  display:grid!important;place-items:center!important;
  background:rgba(13,142,226,.16)!important;
  color:#49c9ff!important;
  font-size:24px!important;
}
body.bx-r38-ui.navigation-active .route-step strong{
  font-size:16px!important;color:#fff!important;
}
body.bx-r38-ui.navigation-active .route-step small,
body.bx-r38-ui.navigation-active .route-step-distance{
  color:#91a8ba!important;
}
body.bx-r38-ui.navigation-active .route-stats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  padding:14px!important;
}
body.bx-r38-ui.navigation-active .route-stats>div{
  border-radius:16px!important;
  padding:13px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.065)!important;
}
body.bx-r38-ui.navigation-active .route-stats small{color:#7f98aa!important}
body.bx-r38-ui.navigation-active .route-stats strong{color:#fff!important;font-size:18px!important}
body.bx-r38-ui.navigation-active .route-point{padding:13px 16px!important}
body.bx-r38-ui.navigation-active .route-primary{
  margin:12px 14px 18px!important;
  width:calc(100% - 28px)!important;
  min-height:48px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#16a8f0,#0879cf)!important;
  color:#fff!important;
  font-weight:900!important;
}

/* mobile + tablets: route sheet becomes full-screen scene */
@media(max-width:1023px){
  body.bx-r38-ui.navigation-active #routePanel{
    inset:0!important;
    width:100vw!important;height:100dvh!important;
    max-width:none!important;max-height:none!important;
    border-radius:0!important;
    padding-top:env(safe-area-inset-top,0px)!important;
    padding-bottom:env(safe-area-inset-bottom,0px)!important;
  }
  body.bx-r38-ui.navigation-active #routePanel>header{
    min-height:72px!important;
  }
  body.bx-r38-ui.navigation-active .route-summary-view,
  body.bx-r38-ui.navigation-active .route-steps-view{
    max-height:calc(100dvh - 132px)!important;
  }
}

/* tablet landscape: slightly inset sheet, still route-scene focused */
@media(min-width:700px) and (max-width:1023px) and (orientation:landscape){
  body.bx-r38-ui.navigation-active #routePanel{
    inset:18px 18px 18px auto!important;
    width:min(560px,72vw)!important;
    height:calc(100dvh - 36px)!important;
    border-radius:28px!important;
  }
  body.bx-r38-ui.navigation-active .route-summary-view,
  body.bx-r38-ui.navigation-active .route-steps-view{
    max-height:calc(100dvh - 168px)!important;
  }
}

/* desktop: large right route scene, map remains visible */
@media(min-width:1024px){
  body.bx-r38-ui.navigation-active #routePanel{
    top:18px!important;
    right:18px!important;
    bottom:18px!important;
    left:auto!important;
    width:min(460px,36vw)!important;
    max-height:none!important;
    border-radius:28px!important;
  }
  body.bx-r38-ui.navigation-active .route-summary-view,
  body.bx-r38-ui.navigation-active .route-steps-view{
    max-height:calc(100vh - 152px)!important;
  }
}

/* Keep maneuver banner hidden except when JS explicitly reveals it */
body.bx-r38-ui.navigation-active:not(.bx-r93-turn-visible) #bxR38TurnCard{
  display:none!important;
}
body.bx-r38-ui.navigation-active.bx-r93-turn-visible #bxR38TurnCard{
  display:grid!important;
}