/* VAIZU V51 — free-map navigation + calmer, clearer HUD */
:root{
  --vaizu-nav-glass:rgba(255,255,255,.94);
  --vaizu-nav-glass-strong:rgba(255,255,255,.985);
  --vaizu-nav-border:rgba(62,68,111,.11);
  --vaizu-nav-shadow:0 12px 34px rgba(41,48,88,.14);
  --vaizu-nav-shadow-soft:0 7px 20px rgba(41,48,88,.10);
}

/* Let the map remain the visual focus. */
.ws-app .map-vignette{background:linear-gradient(180deg,rgba(29,34,55,.14),transparent 20%,transparent 76%,rgba(29,34,55,.08))!important}
.body-nav .map-vignette{background:linear-gradient(180deg,rgba(29,34,55,.08),transparent 18%,transparent 82%,rgba(29,34,55,.055))!important}
.body-nav .ambient-halo{opacity:.25!important}
.body-nav #map{touch-action:none}

/* Top maneuver card */
.body-nav .nav-maneuver-top{
  left:10px!important;right:10px!important;
  top:max(10px,calc(env(safe-area-inset-top) + 6px))!important;
  min-height:70px!important;padding:9px 11px 9px 9px!important;gap:10px!important;
  border-radius:21px!important;border:1px solid var(--vaizu-nav-border)!important;
  background:var(--vaizu-nav-glass)!important;color:var(--vaizu-ink)!important;
  box-shadow:var(--vaizu-nav-shadow)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;-webkit-backdrop-filter:blur(18px) saturate(130%)!important;
}
.body-nav .nav-maneuver-icon{
  width:52px!important;height:52px!important;flex-basis:52px!important;border-radius:16px!important;
  background:linear-gradient(145deg,#7774F2,var(--vaizu))!important;color:#fff!important;
  box-shadow:0 9px 22px rgba(91,92,226,.21)!important;
}
.body-nav .nav-maneuver-copy small{color:#8B94A5!important;font-size:7px!important;letter-spacing:.12em!important}
.body-nav .nav-maneuver-copy b{color:#192137!important;font-size:16px!important;font-weight:850!important;letter-spacing:-.38px!important}
.body-nav .nav-maneuver-copy span{color:#687487!important;font-size:10px!important;font-weight:720!important}

/* Street + recalculate: one calm strip above the bottom card. */
.body-nav .nav-street-chip{
  left:10px!important;right:66px!important;
  bottom:max(92px,calc(env(safe-area-inset-bottom) + 92px))!important;
  height:42px!important;padding:4px 4px 4px 13px!important;
  grid-template-columns:minmax(0,1fr) 34px!important;gap:7px!important;
  border-radius:14px!important;border:1px solid var(--vaizu-nav-border)!important;
  background:var(--vaizu-nav-glass)!important;box-shadow:var(--vaizu-nav-shadow-soft)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
}
.body-nav .nav-street-chip span{color:#2B354B!important;font-size:11.5px!important;font-weight:820!important;text-align:left!important}
.body-nav .nav-recalc-btn{width:34px!important;height:34px!important;border-radius:10px!important;background:#F2F3F8!important;border:1px solid #E2E5ED!important;color:#697487!important}
.body-nav .nav-recalc-btn.recalculating{background:var(--vaizu-soft)!important;color:var(--vaizu)!important;border-color:#D8D8FA!important}

/* Bottom trip summary */
.body-nav .nav-panel.nav-minimal{
  left:10px!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
  padding:8px!important;border-radius:20px!important;
  background:var(--vaizu-nav-glass-strong)!important;border:1px solid var(--vaizu-nav-border)!important;
  box-shadow:0 -9px 28px rgba(41,48,88,.12)!important;
  backdrop-filter:blur(20px) saturate(130%)!important;-webkit-backdrop-filter:blur(20px) saturate(130%)!important;
}
.body-nav .nav-summary-row{grid-template-columns:1fr 1fr 1fr 48px!important;gap:6px!important}
.body-nav .nav-summary-item{height:56px!important;padding:0 9px!important;border:0!important;border-radius:13px!important;background:#F5F6FA!important}
.body-nav .nav-summary-item small{font-size:6.5px!important;color:#8992A2!important;letter-spacing:.1em!important}
.body-nav .nav-summary-item strong{font-size:12px!important;color:#263148!important;font-weight:870!important}
.body-nav .nav-search-btn{width:48px!important;height:56px!important;border-radius:13px!important;background:linear-gradient(145deg,var(--vaizu-2),var(--vaizu))!important;color:#fff!important;box-shadow:0 8px 18px rgba(91,92,226,.18)!important}

/* Navigation controls stay icon-only and stack vertically. */
.body-nav .nav-control-stack{
  display:flex!important;right:10px!important;
  bottom:max(250px,calc(env(safe-area-inset-bottom) + 250px))!important;
  gap:7px!important;z-index:42!important;
}
.body-nav .nav-stack-btn,.body-nav .nav-audio-toggle{
  width:44px!important;height:44px!important;border-radius:14px!important;
  background:var(--vaizu-nav-glass-strong)!important;color:#59657A!important;
  border:1px solid var(--vaizu-nav-border)!important;box-shadow:var(--vaizu-nav-shadow-soft)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
.body-nav .nav-stack-btn.active,.body-nav .nav-audio-toggle.active{
  background:var(--vaizu-soft)!important;color:var(--vaizu)!important;border-color:#D5D5FA!important;
  box-shadow:0 7px 20px rgba(91,92,226,.12)!important;
}
.body-nav .nav-stack-btn:active,.body-nav .nav-audio-toggle:active{transform:scale(.93)!important}
.body-nav .nav-audio-toggle{right:10px!important;bottom:max(198px,calc(env(safe-area-inset-bottom) + 198px))!important}

/* Speedometer stays compact and readable. */
.body-nav .floating-speedo{
  right:10px!important;bottom:max(132px,calc(env(safe-area-inset-bottom) + 132px))!important;
  width:56px!important;height:56px!important;min-width:56px!important;
  background:conic-gradient(from 210deg,var(--vaizu) 0deg var(--speed-angle),#E4E7EF var(--speed-angle) 300deg,transparent 300deg 360deg)!important;
  box-shadow:var(--vaizu-nav-shadow-soft)!important;
}
.body-nav .floating-speedo:after{background:#fff!important;box-shadow:inset 0 0 0 1px #E3E7EF!important}
.body-nav .floating-speedo strong{color:#283248!important;font-size:19px!important}.body-nav .floating-speedo span{color:#8490A2!important}

/* Explicit feedback that dragging unlocked the camera. */
.nav-map-mode{display:none}
.body-nav .nav-map-mode.show{
  display:flex;position:absolute;z-index:41;right:62px;
  bottom:max(337px,calc(env(safe-area-inset-bottom) + 337px));
  max-width:min(230px,calc(100vw - 88px));min-height:44px;padding:7px 10px;align-items:center;gap:8px;
  border-radius:14px;border:1px solid #DADAF8;background:rgba(248,248,255,.97);color:var(--vaizu-deep);
  box-shadow:var(--vaizu-nav-shadow-soft);animation:vaizuFreeMapIn .18s ease both;
}
.nav-map-mode>svg{flex:0 0 auto}.nav-map-mode span{min-width:0}.nav-map-mode b{display:block;font-size:9px;font-weight:900}.nav-map-mode small{display:block;margin-top:2px;color:#727D91;font-size:7px;line-height:1.22;font-weight:650}
@keyframes vaizuFreeMapIn{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}

/* Faster route prompt */
.body-nav .nav-alt-hint.show{
  left:10px!important;top:max(90px,calc(env(safe-area-inset-top) + 86px))!important;
  width:min(360px,calc(100% - 20px))!important;min-height:58px!important;
  border-radius:17px!important;background:rgba(255,255,255,.98)!important;border:1px solid #DDDEF7!important;
  box-shadow:var(--vaizu-nav-shadow)!important;color:#283248!important;
}
.body-nav .nav-alt-hint .nav-alt-copy small{color:var(--vaizu)!important}.body-nav .nav-alt-hint .nav-alt-copy b{color:#283248!important;font-size:10.5px!important}.body-nav .nav-alt-hint .nav-alt-copy em{color:#758095!important}
.body-nav .nav-alt-accept{background:linear-gradient(135deg,var(--vaizu-2),var(--vaizu))!important;color:#fff!important;border-radius:10px!important;box-shadow:none!important}
.body-nav .nav-alt-dismiss{background:#F1F3F7!important;color:#778195!important}

/* Feedback should look like a lightweight native prompt. */
.body-nav .nav-feedback.show{background:rgba(255,255,255,.98)!important;border:1px solid var(--vaizu-nav-border)!important;box-shadow:var(--vaizu-nav-shadow-soft)!important}
.body-nav .nav-feedback span{color:#697487!important}.body-nav .nav-feedback button{background:#F4F5F9!important;color:#536075!important;border-color:#E2E6EE!important}.body-nav .nav-feedback button:first-of-type{background:#EAF8F3!important;color:#23866F!important;border-color:#D0EEE4!important}.body-nav .nav-feedback button:last-of-type{background:#FFF7E9!important;color:#9B6D1B!important;border-color:#F2E0B9!important}

/* Voice selector */
.body-nav .nav-voice-popover{background:#fff!important;color:#283248!important;border:1px solid var(--vaizu-nav-border)!important;box-shadow:var(--vaizu-nav-shadow)!important}
.body-nav .nav-voice-popover small{color:#7C8799!important}.body-nav .nav-voice-popover select{background:#F7F8FB!important;color:#2A344A!important;border-color:#E1E5ED!important}.body-nav .nav-voice-popover button{background:var(--vaizu-soft)!important;color:var(--vaizu-deep)!important}

/* Planning UI polish */
.ws-app .search-card{box-shadow:0 12px 34px rgba(41,48,88,.12)!important;border-color:rgba(62,68,111,.10)!important}
.ws-app .sheet{box-shadow:0 -10px 34px rgba(41,48,88,.10)!important;border-color:rgba(62,68,111,.10)!important}
.ws-app .route-variants{gap:7px!important}.ws-app .route-variant{min-height:47px!important;padding:8px 10px!important}.ws-app .route-variant b{font-size:12px!important}.ws-app .route-variant span{font-size:8px!important;color:#788397!important}
.ws-app .route-card{padding:12px!important;border-radius:17px!important;background:#FAFBFD!important}.ws-app .route-card-top h3{font-size:13px!important}.ws-app .route-card .mins{font-size:20px!important}.ws-app .route-insight{padding:5px!important}.ws-app .insight{background:#fff!important;border-radius:11px!important}
.ws-app .start-trip-cta{box-shadow:0 9px 22px rgba(91,92,226,.18)!important}

/* Mapbox popups: align with the bright VAIZU language. */
.ws-app .mapboxgl-popup-content{background:#fff!important;color:#283248!important;border:1px solid #E0E4EC!important;box-shadow:0 13px 30px rgba(41,48,88,.16)!important}
.ws-app .mapboxgl-popup-tip{border-top-color:#fff!important}

@media(pointer:coarse){
  .body-nav .nav-maneuver-top,.body-nav .nav-street-chip,.body-nav .nav-panel.nav-minimal,.body-nav .nav-stack-btn,.body-nav .nav-audio-toggle{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media(max-width:390px){
  .body-nav .nav-maneuver-top{left:7px!important;right:7px!important;min-height:66px!important;border-radius:18px!important}
  .body-nav .nav-maneuver-icon{width:48px!important;height:48px!important;flex-basis:48px!important;border-radius:15px!important}
  .body-nav .nav-maneuver-copy b{font-size:15px!important}
  .body-nav .nav-panel.nav-minimal{left:7px!important;right:7px!important;bottom:max(7px,env(safe-area-inset-bottom))!important;border-radius:18px!important}
  .body-nav .nav-summary-item{height:53px!important;padding:0 7px!important}.body-nav .nav-summary-item strong{font-size:10.8px!important}.body-nav .nav-search-btn{height:53px!important}
  .body-nav .nav-street-chip{left:7px!important;right:60px!important;bottom:max(86px,calc(env(safe-area-inset-bottom) + 86px))!important;height:40px!important}
  .body-nav .nav-control-stack{right:7px!important;bottom:max(236px,calc(env(safe-area-inset-bottom) + 236px))!important;gap:6px!important}
  .body-nav .nav-stack-btn,.body-nav .nav-audio-toggle{width:42px!important;height:42px!important;border-radius:13px!important}
  .body-nav .nav-audio-toggle{right:7px!important;bottom:max(188px,calc(env(safe-area-inset-bottom) + 188px))!important}
  .body-nav .floating-speedo{right:7px!important;bottom:max(128px,calc(env(safe-area-inset-bottom) + 128px))!important;width:54px!important;height:54px!important;min-width:54px!important}
  .body-nav .nav-map-mode.show{right:56px;bottom:max(319px,calc(env(safe-area-inset-bottom) + 319px));max-width:205px}
  .nav-map-mode small{font-size:6.7px}
  .body-nav .nav-alt-hint.show{left:7px!important;width:calc(100% - 14px)!important;top:max(84px,calc(env(safe-area-inset-top) + 80px))!important}
}