/* SamiMap R106 — approved mobile HUD polish. CSS-only; keep R105 controllers untouched.
   Summary and collapsed retain the same geometry so GPU transform animates smoothly. */
@media (max-width: 760px) {
  html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #driveHud {
    display:block!important;
    visibility:visible!important;
    position:fixed!important;
    top:auto!important;
    bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
    left:max(8px,env(safe-area-inset-left,0px))!important;
    right:auto!important;
    width:calc(100vw - 88px - env(safe-area-inset-left,0px))!important;
    max-width:calc(100vw - 88px - env(safe-area-inset-left,0px))!important;
    height:158px!important;
    min-height:158px!important;
    max-height:158px!important;
    margin:0!important;padding:0!important;
    border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;
    overflow:visible!important;
    z-index:2147482700!important;
    backface-visibility:hidden!important;
    transition:transform 640ms cubic-bezier(.22,1,.36,1),opacity 420ms ease!important;
    will-change:transform,opacity!important;
  }
  html body.bx-r38-ui.navigation-active.bx100-hud-summary #driveHud {
    transform:translate3d(0,0,0)!important;
    opacity:1!important;pointer-events:auto!important;
  }
  html body.bx-r38-ui.navigation-active.bx100-hud-collapsed #driveHud {
    transform:translate3d(0,calc(100% + 34px),0)!important;
    opacity:0!important;pointer-events:none!important;
  }
  html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #driveHud > #bxR40RoadHud {
    display:grid!important;box-sizing:border-box!important;
    position:relative!important;inset:auto!important;
    width:100%!important;max-width:100%!important;
    height:158px!important;min-height:158px!important;max-height:158px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:82px 76px!important;
    grid-template-areas:"road road steps" "arrival eta remain"!important;
    gap:0!important;align-content:stretch!important;
    overflow:hidden!important;
    border:1px solid rgba(47,178,246,.70)!important;
    border-radius:19px!important;
    padding:0 8px!important;
    background:linear-gradient(145deg,rgba(5,39,70,.987),rgba(3,22,43,.987) 68%,rgba(2,17,33,.987))!important;
    box-shadow:0 10px 26px rgba(0,0,0,.37),inset 0 1px 0 rgba(134,220,255,.15)!important;
  }
  html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #driveHud > :not(#bxR40RoadHud){
    display:none!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign {
    grid-area:road!important;box-sizing:border-box!important;
    display:flex!important;align-items:center!important;
    min-height:0!important;height:78px!important;
    border:0!important;border-right:1px solid rgba(138,196,235,.21)!important;
    border-bottom:0!important;background:transparent!important;
    padding:0 6px 0 2px!important;margin:0!important;
    gap:7px!important;overflow:hidden!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-mini{
    width:43px!important;min-width:43px!important;height:43px!important;
    flex:0 0 43px!important;border-radius:13px!important;
    border:1px solid rgba(60,191,250,.8)!important;
    background:linear-gradient(145deg,#12517f,#042441)!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-mini svg{
    width:24px!important;height:24px!important;
    stroke:#f7fdff!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-name{
    flex:1 1 auto!important;min-width:0!important;display:block!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-name span{
    display:block!important;font-size:10px!important;color:#bcd9f0!important;
    line-height:1.18!important;font-weight:600!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-name strong{
    display:block!important;color:#fff!important;
    font-size:14px!important;font-weight:800!important;line-height:1.18!important;
    max-height:2.36em!important;
    white-space:normal!important;overflow:hidden!important;overflow-wrap:anywhere!important;
    display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;
    margin-top:4px!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud #bx104RoadArabic{
    color:#54e3ff!important;font-size:10px!important;line-height:1.1!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > #bx102StepsButton{
    grid-area:steps!important;box-sizing:border-box!important;align-self:center!important;
    width:calc(100% - 9px)!important;height:46px!important;min-height:46px!important;
    min-width:0!important;margin:0 0 0 9px!important;padding:4px!important;
    display:flex!important;gap:4px!important;align-items:center!important;justify-content:center!important;
    border:1px solid rgba(118,224,255,.72)!important;border-radius:12px!important;
    background:linear-gradient(145deg,#119df9,#0871dc)!important;
    box-shadow:0 4px 11px rgba(0,79,170,.24),inset 0 1px 0 rgba(255,255,255,.32)!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    font:800 11px/1.05 system-ui,-apple-system,'Segoe UI',sans-serif!important;
    white-space:nowrap!important;text-shadow:0 1px 2px rgba(0,30,60,.32)!important;
    cursor:pointer!important;pointer-events:auto!important;touch-action:manipulation!important;
  }
  html body.bx-r38-ui.navigation-active #bx102StepsButton > span {
    color:#fff!important;-webkit-text-fill-color:#fff!important;
  }
  html body.bx-r38-ui.navigation-active #bx102StepsButton .bx104-button-svg,
  html body.bx-r38-ui.navigation-active #bx102StepsButton .bx104-chevron{
    color:#fff!important;stroke:#fff!important;
    width:15px!important;height:15px!important;flex:0 0 15px!important;
  }
  html body.bx-r38-ui.navigation-active #bx102StepsButton .bx104-chevron{
    width:11px!important;flex-basis:11px!important;
  }
  html body.bx-r38-ui.navigation-active #bx102StepsButton svg{
    stroke:#fff!important;fill:none!important;display:block!important;
    width:100%!important;height:100%!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric {
    box-sizing:border-box!important;
    grid-area:auto!important;height:73px!important;min-height:0!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
    padding:4px 2px!important;gap:3px!important;
    text-align:center!important;overflow:hidden!important;
    border:0!important;border-top:1px solid rgba(125,186,233,.23)!important;
    border-right:1px solid rgba(125,186,233,.14)!important;
    background:transparent!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-arrival{grid-area:arrival!important}
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-eta{grid-area:eta!important}
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-remain{grid-area:remain!important;border-right:0!important}
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric .bx40-metric-icon{
    display:grid!important;place-items:center!important;box-sizing:border-box!important;
    width:31px!important;height:31px!important;min-width:31px!important;
    flex:0 0 31px!important;margin:0!important;
    border:1px solid rgba(80,185,247,.8)!important;border-radius:50%!important;
    background:linear-gradient(155deg,#14517c,#0a3051)!important;
    color:#f6fbff!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-eta .bx40-metric-icon{
    color:#a5ffeb!important;border-color:#1bd5b2!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-remain .bx40-metric-icon{
    color:#d6c9ff!important;border-color:#a28aff!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric .bx40-metric-icon svg{
    display:block!important;stroke:currentColor!important;fill:none!important;
    width:17px!important;height:17px!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric .bx40-metric-copy{
    min-width:0!important;display:block!important;width:100%!important;
    overflow:hidden!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric span:not(.bx40-metric-icon){
    display:none!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric strong{
    display:block!important;font-size:14px!important;line-height:1.16!important;font-weight:800!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    text-shadow:none!important;overflow:hidden!important;
    white-space:nowrap!important;text-overflow:ellipsis!important;margin:0!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric small{
    display:none!important;
  }
  html body.bx-r38-ui.navigation-active.bx100-hud-summary #bx102SpeedMap:not([hidden]){
    bottom:max(177px,calc(env(safe-area-inset-bottom,0px) + 177px))!important;
  }
  html body.bx-r38-ui.navigation-active #bx102SpeedMap{
    transition:bottom 570ms cubic-bezier(.22,1,.36,1)!important;
  }
  html body.bx-r38-ui.navigation-active #bx97HudArrow:not([hidden]){
    left:min(calc(100vw - 135px),250px)!important;
    transition:bottom 640ms cubic-bezier(.22,1,.36,1),box-shadow 360ms ease!important;
    border-radius:12px 12px 5px 5px!important;
    background:#082d4d!important;color:#f5faff!important;
    border:1px solid rgba(43,190,255,.85)!important;
    box-shadow:0 0 0 1px rgba(36,150,255,.28),0 0 13px rgba(0,146,248,.24)!important;
  }
  html body.bx-r38-ui.navigation-active #bx97HudArrow svg{
    stroke:#fff!important;fill:none!important;
  }
}
@media(max-width:350px){
 html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #driveHud{
   width:calc(100vw - 79px - env(safe-area-inset-left,0px))!important;
 }
 html body.bx-r38-ui.navigation-active #bx102StepsButton{
   font-size:10px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #driveHud{
   transition:none!important;
 }
 html body.bx-r38-ui.navigation-active #bx97HudArrow,
 html body.bx-r38-ui.navigation-active #bx102SpeedMap {transition:none!important}
}
/* Reserve enough space to show the entire Route steps label on a phone. */
@media(max-width:760px){
 html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #driveHud > #bxR40RoadHud{
   grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(105px,1.40fr)!important;
 }
 html body.bx-r38-ui.navigation-active #bxR40RoadHud > #bx102StepsButton{
   width:calc(100% - 6px)!important;margin-left:6px!important;
   gap:4px!important;padding:4px 3px!important;
 }
 html body.bx-r38-ui.navigation-active #bx102StepsButton .bx104-chevron{display:none!important}
 html body.bx-r38-ui.navigation-active #bx102StepsButton > span:not(.bx104-button-svg):not(.bx104-chevron){
   color:#fff!important;-webkit-text-fill-color:#fff!important;
   white-space:nowrap!important;overflow:visible!important;
   font-size:11px!important;letter-spacing:-.15px!important;
 }
}
@media(max-width:360px){
 html body.bx-r38-ui.navigation-active #bx102StepsButton > span:not(.bx104-button-svg):not(.bx104-chevron){font-size:10px!important}
}