/* ═══════════════════════════════════════════════════════════════════
   Delta Drive — Map-First Navigation App
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg-void: #0B0F14;
  --bg-surface: #1B222B;
  --route-active: #3A8DFF;
  --delta-glow: #3FE0C5;
  --text-primary: #FFFFFF;
  --text-muted: #8E9CAE;
  --warning: #FFB547;
  --critical: #FF5C6A;
  --success: #2FD17B;
  --card-bg: rgba(11,15,20,0.88);
  --glass: rgba(27,34,43,0.75);
  --border: rgba(255,255,255,0.06);
  --radius: 16px;
  --blur: 24px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --safe-bottom: env(safe-area-inset-bottom, 20px);
  --safe-top: env(safe-area-inset-top, 44px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;width:100%;background:var(--bg-void);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,'Heebo',sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;direction:rtl;touch-action:manipulation;}
::-webkit-scrollbar{width:0;}

/* ═══════ MAP ═══════ */
#map{position:fixed;inset:0;z-index:1;}
#map.bearing-mode{transition:transform 0.3s linear;}
.leaflet-control-attribution,.leaflet-control-zoom{display:none!important;}

/* ═══════ LAUNCH ═══════ */
#launch{position:fixed;inset:0;background:var(--bg-void);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.8s ease-out,visibility 0.8s;}
#launch.done{opacity:0;visibility:hidden;pointer-events:none;}
.launch-glow{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(63,224,197,0.12) 0%,transparent 70%);animation:gp 3s ease-in-out infinite;}
@keyframes gp{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:1}}
.launch-logo{font-size:80px;font-weight:200;position:relative;z-index:2;}
.launch-name{font-size:22px;font-weight:600;letter-spacing:4px;margin-top:16px;text-transform:uppercase;opacity:.9;}
.launch-status{font-size:14px;color:var(--text-muted);margin-top:48px;}
.launch-dots{display:flex;gap:6px;margin-top:20px;}
.launch-dot{width:5px;height:5px;border-radius:50%;background:var(--delta-glow);opacity:.3;animation:ds 1.5s ease-in-out infinite;}
.launch-dot:nth-child(2){animation-delay:.2s;}.launch-dot:nth-child(3){animation-delay:.4s;}
@keyframes ds{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.8;transform:scale(1.4)}}

/* ═══════ TOP HUD — status + next-turn (column so wrapped pills don’t overlap preview) ═══════ */
#top-hud{
  position:fixed;
  top:calc(10px + var(--safe-top));
  left:10px;
  right:10px;
  z-index:55;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  pointer-events:none;
}
#top-hud > #status-bar,
#top-hud > #next-turn{
  pointer-events:auto;
}

/* ═══════ STATUS BAR ═══════ */
#status-bar{
  position:relative;
  width:100%;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.status-pill{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--card-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--border);border-radius:20px;font-size:11px;font-weight:600;pointer-events:auto;transition:all .4s var(--ease);white-space:nowrap;}
.status-pill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.dot.green{background:var(--success);}.dot.cyan{background:var(--delta-glow);}.dot.yellow{background:var(--warning);}.dot.red{background:var(--critical);animation:bk 1s infinite;}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.3}}
.pill-speed{font-size:13px;font-weight:700;padding:5px 12px;}
.pill-speed .speed-val{font-size:16px;}
.pill-street{flex:1 1 100%;order:10;width:100%;font-size:12px;font-weight:500;text-align:center;padding:6px 10px;margin-top:4px;box-sizing:border-box;}
.eta-pill{margin-inline-start:auto;font-size:14px;font-weight:700;padding:5px 12px;}
.hidden{display:none!important;}

/* ═══════ BOTTOM SHEET ═══════ */
#sheet{position:fixed;bottom:0;left:0;right:0;z-index:100;border-radius:20px 20px 0 0;background:var(--card-bg);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-top:1px solid var(--border);transition:max-height .45s var(--ease);max-height:calc(80px + var(--safe-bottom));overflow:hidden;box-shadow:0 -4px 40px rgba(0,0,0,.5);}
#sheet.open{max-height:55vh;overflow-y:auto;}
#sheet.full{max-height:88vh;overflow-y:auto;}
#sheet.hidden-for-nav{max-height:0!important;overflow:hidden!important;border:none!important;box-shadow:none!important;padding:0!important;pointer-events:none;}

.sheet-handle{width:36px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:0 auto;padding:12px 0;background-clip:content-box;cursor:grab;}
.sheet-search{display:flex;gap:8px;padding:0 16px 12px;}
.sheet-search input{flex:1;padding:14px 18px;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;color:var(--text-primary);font-size:16px;font-family:inherit;outline:none;transition:border-color .2s;}
.sheet-search input:focus{border-color:rgba(58,141,255,.35);}
.sheet-search input::placeholder{color:var(--text-muted);}
.sheet-search button{width:50px;background:var(--route-active);border:none;border-radius:14px;color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.sheet-search button svg{width:20px;height:20px;}
.sheet-content{padding:0 16px calc(16px + var(--safe-bottom));}

/* Home content */
.home-welcome{padding:0 4px 8px;}
.home-greeting{font-size:14px;color:var(--text-muted);}
.home-title{font-size:26px;font-weight:700;letter-spacing:-.3px;margin-top:2px;}
.home-weather{font-size:13px;color:var(--text-muted);margin-top:4px;}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.quick-card{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px;cursor:pointer;transition:transform .15s;-webkit-tap-highlight-color:transparent;}
.quick-card:active{transform:scale(.97);}
.quick-card-icon{font-size:18px;margin-bottom:6px;}
.quick-card-label{font-size:11px;color:var(--text-muted);}
.quick-card-value{font-size:15px;font-weight:700;margin-top:2px;}

/* Favorites */
.favs-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0;margin-top:8px;scrollbar-width:none;}
.favs-row::-webkit-scrollbar{display:none;}
.fav-chip{flex-shrink:0;display:flex;align-items:center;gap:4px;padding:8px 14px;background:var(--glass);border:1px solid var(--border);border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.fav-chip:active{background:rgba(58,141,255,.15);}

/* Search results */
.result-card{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,transform .15s;-webkit-tap-highlight-color:transparent;animation:fu .3s var(--ease) both;}
.result-card:active{transform:scale(.98);}
.result-card.selected{border-color:var(--route-active);}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.result-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.result-name{font-size:15px;font-weight:700;}
.result-dist{font-size:13px;color:var(--text-muted);font-weight:500;}
.result-addr{font-size:13px;color:var(--text-muted);margin-bottom:8px;line-height:1.4;}
.result-footer{display:flex;justify-content:space-between;align-items:center;}
.stability-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.stability-badge.high{background:rgba(47,209,123,.1);color:var(--success);}
.stability-badge.mixed{background:rgba(255,181,71,.1);color:var(--warning);}
.stability-badge.delta{background:rgba(63,224,197,.1);color:var(--delta-glow);}
.result-time{font-size:13px;color:var(--text-muted);}

/* Alternative routes */
.alt-label{font-size:12px;color:var(--text-muted);padding:8px 0 4px;font-weight:600;}

.go-btn{display:block;width:100%;padding:16px;margin-top:12px;background:var(--route-active);color:#fff;border:none;border-radius:14px;font-size:17px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .15s;-webkit-tap-highlight-color:transparent;}
.go-btn:active{transform:scale(.97);}
.search-msg{text-align:center;padding:20px;font-size:14px;color:var(--text-muted);}
.search-msg.error{color:var(--critical);}

/* System panel */
.sys-title{font-size:20px;font-weight:700;margin-bottom:16px;}
.sys-subtitle{font-size:15px;font-weight:600;margin:16px 0 8px;}
.rings-row{display:flex;justify-content:space-around;padding:8px 0;}
.ring-item{text-align:center;}
.ring-item svg{width:84px;height:84px;}
.ring-bg{fill:none;stroke:var(--bg-surface);stroke-width:6;}
.ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease);}
.ring-value{font-size:20px;font-weight:700;margin-top:2px;}
.ring-label{font-size:11px;color:var(--text-muted);margin-top:2px;}
.history-card{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px;}
.history-header{display:flex;justify-content:space-between;margin-bottom:10px;}
.history-route{font-size:14px;font-weight:700;}
.history-time{font-size:11px;color:var(--text-muted);}
.history-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.history-stat{font-size:12px;color:var(--text-muted);}
.history-stat strong{color:var(--text-primary);font-weight:600;}
.history-continuity{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);}
.history-continuity .stable{color:var(--success);font-weight:600;}
.history-continuity .unstable{color:var(--warning);font-weight:600;}
.history-empty{text-align:center;padding:24px;color:var(--text-muted);font-size:13px;}
.action-row{display:flex;gap:10px;margin-top:12px;padding-bottom:var(--safe-bottom);}
.ghost-btn{flex:1;padding:14px;background:transparent;border:1px solid var(--border);border-radius:14px;color:var(--text-primary);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.ghost-btn:active{background:rgba(255,255,255,.04);}

/* ═══════ U1 — TOP TURN BANNER (Mapbox-style giant blue card) ═══════ */
#drive-turn-banner{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0) + 12px);
  left:12px;right:12px;
  background:linear-gradient(135deg, #1e6dff 0%, #3a8dff 50%, #5aa6ff 100%);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:22px;
  padding:14px 18px;
  display:none;
  align-items:center;
  gap:14px;
  z-index:95;
  box-shadow:0 12px 40px rgba(30,109,255,0.45), 0 4px 16px rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.18);
  animation:fu .35s var(--ease);
}
#drive-turn-banner.visible{display:flex;}
#drive-turn-banner .dtb-arrow{
  width:62px;height:62px;border-radius:18px;
  background:rgba(255,255,255,0.16);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
}
#drive-turn-banner .dtb-arrow svg{width:36px;height:36px;}
#drive-turn-banner .dtb-info{flex:1;min-width:0;color:#fff;}
#drive-turn-banner .dtb-distance{
  font-size:32px;font-weight:900;line-height:1;letter-spacing:-0.02em;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.2);
  margin-bottom:4px;font-variant-numeric:tabular-nums;
}
#drive-turn-banner .dtb-street{
  font-size:15px;font-weight:600;color:rgba(255,255,255,0.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-0.01em;
}

/* ═══════ U6 — SPEEDOMETER (Waze-style bottom-left corner) + W2 speed-limit ═══════ */
#drive-speedometer{
  position:fixed;
  bottom:calc(150px + var(--safe-bottom));   /* sits above #turn-card */
  left:14px;
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%, rgba(40,52,72,0.95), rgba(15,21,30,0.9));
  border:3px solid rgba(58,141,255,0.5);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  z-index:88;
  box-shadow:0 8px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  font-variant-numeric:tabular-nums;
}
#drive-speedometer.visible{display:flex;animation:fu .35s var(--ease);}
#drive-speedometer .dsm-speed-num{
  font-size:36px;font-weight:900;line-height:1;letter-spacing:-0.04em;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
#drive-speedometer .dsm-speed-unit{
  font-size:9px;font-weight:700;color:rgba(255,255,255,0.55);
  margin-top:3px;letter-spacing:0.06em;text-transform:uppercase;
}
/* Speeding state: red glow when over limit */
#drive-speedometer.over-limit{
  border-color:rgba(255,69,58,0.85);
  box-shadow:0 8px 30px rgba(255,69,58,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  animation:speedPulse 1.2s ease-in-out infinite;
}
@keyframes speedPulse{
  0%,100%{box-shadow:0 8px 30px rgba(255,69,58,0.4), inset 0 1px 0 rgba(255,255,255,0.08);}
  50%{box-shadow:0 8px 36px rgba(255,69,58,0.7), inset 0 1px 0 rgba(255,255,255,0.08);}
}

/* W2 — Speed-limit sign (red circle, EU style) embedded on speedometer shoulder.
   Sits to the right of the speedometer (LTR) which works in RTL context too
   since this is positioned absolutely relative to the speedo */
#dsm-limit-sign{
  position:absolute;
  top:-8px;right:-12px;
  width:40px;height:40px;border-radius:50%;
  background:#fff;
  border:3.5px solid #d32f2f;
  display:none;
  align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.4), 0 2px 4px rgba(211,47,47,0.3);
  font-variant-numeric:tabular-nums;
}
#dsm-limit-sign.visible{display:flex;}
#dsm-limit-sign .dsm-limit-num{
  font-size:15px;font-weight:900;color:#000;letter-spacing:-0.02em;line-height:1;
}

/* Hide all of the above when NOT in driving-mode (normal map browsing) */
body:not(.driving-mode) #drive-turn-banner,
body:not(.driving-mode) #drive-speedometer{display:none!important;}

/* ═══════ TURN CARD ═══════ */
#turn-card{position:fixed;bottom:calc(16px + var(--safe-bottom));left:12px;right:12px;padding:18px;background:var(--card-bg);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid var(--border);border-radius:18px;z-index:90;box-shadow:0 4px 30px rgba(0,0,0,.5);display:none;}
#turn-card.visible{display:block;animation:fu .3s var(--ease);}
.turn-row{display:flex;align-items:flex-start;gap:14px;}
.turn-arrow{width:50px;height:50px;background:var(--route-active);border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 14px rgba(58,141,255,.3);}
.turn-arrow svg{width:26px;height:26px;}
.turn-text{font-size:20px;font-weight:700;line-height:1.25;margin-bottom:2px;}
.turn-dist{font-size:14px;color:var(--route-active);font-weight:700;margin-bottom:4px;}
.turn-meta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--text-muted);font-weight:500;}
.turn-meta .delta-active{color:var(--delta-glow);font-weight:700;}
.stop-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,92,106,.15);color:var(--critical);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;cursor:pointer;flex-shrink:0;align-self:center;-webkit-tap-highlight-color:transparent;transition:background .15s;}
.stop-btn:active{background:rgba(255,92,106,.3);}

/* ═══════ ARRIVAL OVERLAY ═══════ */
#arrival-overlay{position:fixed;inset:0;background:rgba(11,15,20,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;}
#arrival-overlay.visible{display:flex;animation:fu .5s var(--ease);}
.arrival-icon{font-size:64px;margin-bottom:16px;}
.arrival-title{font-size:28px;font-weight:700;margin-bottom:8px;}
.arrival-sub{font-size:15px;color:var(--text-muted);margin-bottom:24px;}
.arrival-stats{display:flex;gap:24px;margin-bottom:32px;}
.arrival-stat{text-align:center;}
.arrival-stat-val{font-size:22px;font-weight:700;}
.arrival-stat-label{font-size:12px;color:var(--text-muted);margin-top:2px;}
.arrival-btn{padding:16px 48px;background:var(--delta-glow);color:var(--bg-void);border:none;border-radius:14px;font-size:17px;font-weight:700;cursor:pointer;font-family:inherit;}

/* ═══════ FABs ═══════ */
.fab-group{position:fixed;right:14px;bottom:calc(96px + var(--safe-bottom));display:flex;flex-direction:column;gap:10px;z-index:50;}
.fab{width:44px;height:44px;border-radius:50%;background:var(--card-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,background .2s;-webkit-tap-highlight-color:transparent;}
.fab:active{transform:scale(.9);background:rgba(255,255,255,.08);}
.fab svg{width:20px;height:20px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.fab.active svg{stroke:var(--delta-glow);}
.fab.active{background:rgba(63,224,197,0.15);border-color:rgba(63,224,197,0.3);}
.fab-voice{font-size:18px;}

/* ═══════ MARKERS ═══════ */
.dest-marker{width:14px;height:14px;background:var(--route-active);border-radius:50%;border:3px solid var(--bg-void);box-shadow:0 0 10px rgba(58,141,255,.5);}
.anchor-tooltip{background:rgba(11,15,20,.85)!important;border:1px solid rgba(63,224,197,.3)!important;color:var(--delta-glow)!important;font-size:11px!important;font-weight:600!important;padding:3px 8px!important;border-radius:8px!important;}

/* ═══════ BUSINESS POPUPS ═══════ */
.biz-popup .leaflet-popup-content-wrapper{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:12px;color:white;box-shadow:0 4px 20px rgba(0,0,0,.5);}
.biz-popup .leaflet-popup-tip{background:var(--card-bg);}
.biz-popup .leaflet-popup-close-button{color:var(--text-muted)!important;font-size:16px!important;}

/* ═══════ TUNNEL MODE ═══════ */
body.tunnel .status-pill:first-child{background:rgba(63,224,197,.15);border-color:rgba(63,224,197,.3);}
body.tunnel .vehicle-marker{box-shadow:0 0 20px rgba(63,224,197,.7),0 0 6px rgba(63,224,197,1);}

/* ═══════ ROUTE ALTERNATIVES ═══════ */
.alt-route{opacity:.4;pointer-events:none;}

/* ═══════ ROUTE PROGRESS BAR ═══════ */
#route-progress{position:fixed;top:calc(var(--safe-top) - 2px);left:0;right:0;height:3px;z-index:60;background:rgba(255,255,255,0.06);}
#route-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,rgba(63,224,197,0.88),rgba(58,141,255,0.95),rgba(63,224,197,0.88));background-size:200% 100%;border-radius:0 2px 2px 0;transition:width 1s linear;animation:routeFillShimmer 3.5s ease-in-out infinite;}
@keyframes routeFillShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
#route-progress.hidden{display:none;}

/* ═══════ TURN ARROW ICONS ═══════ */
.turn-arrow{position:relative;overflow:hidden;}
.turn-arrow svg{transition:transform 0.3s var(--ease);}
.turn-arrow.left svg{transform:rotate(180deg);}
.turn-arrow.slight-left svg{transform:rotate(210deg);}
.turn-arrow.slight-right svg{transform:rotate(-30deg);}
.turn-arrow.uturn svg{transform:rotate(180deg) scaleX(-1);}
.turn-arrow.straight svg{transform:rotate(-90deg);}
.turn-arrow.arrive{background:var(--success);}

/* ═══════ NEXT TURN PREVIEW (below #status-bar in #top-hud; RTL: align to inline-start = right) ═══════ */
#next-turn{
  position:relative;
  align-self:flex-start;
  padding:8px 14px;
  background:var(--card-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  display:none;
  max-width:min(100%,280px);
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}
#next-turn.visible{display:flex;align-items:flex-start;gap:6px;animation:fu .3s var(--ease);}
#next-turn .nt-icon{width:20px;height:20px;background:rgba(58,141,255,0.15);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#next-turn .nt-icon svg{width:12px;height:12px;stroke:var(--route-active);fill:none;stroke-width:2.5;}

/* ═══════ SMOOTH VEHICLE MARKER ═══════ */
.vehicle-wrap{width:40px;height:40px;position:relative;transition:transform 0.9s linear;}
.vehicle-arrow{position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);opacity:0;transition:opacity 0.3s;}
.vehicle-arrow svg{width:100%;height:100%;}
.vehicle-dot{position:absolute;top:50%;left:50%;width:14px;height:14px;transform:translate(-50%,-50%);background:var(--delta-glow);border-radius:50%;border:2.5px solid var(--bg-void);box-shadow:0 0 12px rgba(63,224,197,.5),0 0 4px rgba(63,224,197,.8);transition:opacity 0.3s;}
.vehicle-accuracy{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(63,224,197,0.08);border:1px solid rgba(63,224,197,0.12);pointer-events:none;transition:width 0.5s, height 0.5s;}
.vehicle-wrap.navigating .vehicle-arrow{opacity:1;}
.vehicle-wrap.navigating .vehicle-dot{opacity:0;}
.vehicle-wrap.moving .vehicle-dot{animation:markerPulse 2s ease-in-out infinite;}
@keyframes markerPulse{0%,100%{box-shadow:0 0 12px rgba(63,224,197,.5),0 0 4px rgba(63,224,197,.8);}50%{box-shadow:0 0 20px rgba(63,224,197,.7),0 0 8px rgba(63,224,197,1);}}

/* Leaflet smooth marker position transition */
.leaflet-marker-icon.smooth-move{transition:transform 0.9s linear !important;}

/* ═══════ DRIVING MODE — HUD מינימלי, פנייה כגיבור, פחות רעש ═══════ */
.drive-alert{
  position:fixed;
  top:calc(8px + var(--safe-top));
  left:10px;
  right:10px;
  z-index:56;
  padding:10px 14px;
  background:rgba(255,92,106,0.14);
  border:1px solid rgba(255,92,106,0.4);
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  text-align:center;
  color:#ffc8cc;
  pointer-events:none;
  line-height:1.35;
}
.drive-alert.hidden{display:none!important;}
body.driving-mode #pill-delta,
body.driving-mode #pill-anchors,
body.driving-mode #pill-ela,
body.driving-mode #pill-delivery,
body.driving-mode #pill-phase,
body.driving-mode #pill-gps,
body.driving-mode #pill-street{display:none!important;}
body.driving-mode.dflow-signal-warn #pill-gps{display:flex!important;}
body.driving-mode #status-bar{
  justify-content:center;
  flex-wrap:nowrap;
  gap:10px;
}
body.driving-mode #pill-limit{display:flex!important;}
/* Next preview: compact in HUD; hero animation flies it to center */
body.driving-mode #next-turn:not(.visible){display:none!important;}
body.driving-mode #next-turn.visible{display:flex!important;}
#pill-speed.dflow-hero-busy,#next-turn.dflow-hero-busy{
  background:rgba(11,15,20,0.92)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(63,224,197,0.22)!important;
  border-radius:18px!important;
}
body.driving-mode #fab-system{display:none!important;}
body.driving-mode #nav-delta{display:none!important;}
body.driving-mode #turn-card{
  left:6px;
  right:6px;
  bottom:calc(8px + var(--safe-bottom));
  padding:22px 18px;
  border-radius:22px;
  border:2px solid rgba(58,141,255,0.28);
  box-shadow:0 10px 44px rgba(0,0,0,.55),0 0 0 1px rgba(58,141,255,0.12);
  z-index:92;
}
body.driving-mode .turn-arrow{width:68px;height:68px;border-radius:18px;}
body.driving-mode .turn-arrow svg{width:36px;height:36px;}
body.driving-mode .turn-text{font-size:26px;line-height:1.2;}
body.driving-mode .turn-dist{font-size:17px;}
body.driving-mode .turn-meta{font-size:14px;}
body.driving-mode.tunnel .drive-alert{
  background:rgba(63,224,197,0.12);
  border-color:rgba(63,224,197,0.35);
  color:var(--delta-glow);
}

/* ═══════════════════════════════════════════════════════════════════
   ΔFLOW UI — Reality Driven Interface (minimal static chrome)
   ═══════════════════════════════════════════════════════════════════ */

/* Cruise: almost nothing — no pill stack unless signal is bad or active delivery */
body.dflow:not(.driving-mode):not(.dflow-signal-warn) #status-bar .status-pill{display:none!important;}
body.dflow:not(.driving-mode) #pill-delivery:not(.hidden){display:flex!important;}
body.dflow.dflow-signal-warn:not(.driving-mode) #pill-gps{display:flex!important;}

/* Intent mode: progressive reveal — speed / ETA only when physics says so */
body.driving-mode:not(.dflow-speed) #pill-speed{display:none!important;}
body.driving-mode:not(.dflow-eta) #pill-eta{display:none!important;}
body.driving-mode.dflow-speed #pill-speed{display:flex!important;}
body.driving-mode.dflow-eta #pill-eta{display:flex!important;}

/* No numeric Δ% pill — coherence is route + lock visuals */
body.dflow #pill-phase{display:none!important;}

/* Tunnel / loss: world softens — map, not a paragraph */
body.dflow.tunnel #map{
  filter:brightness(0.74) saturate(0.84);
  transition:filter .65s var(--ease);
}
body.dflow.dflow-locked:not(.tunnel) #map{filter:none;}

/* Loss strip: glow only, no copy */
#drive-alert:not(.hidden){
  min-height:3px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
}
#drive-alert[data-dflow-loss="1"]:not(.hidden){
  background:linear-gradient(90deg,transparent,rgba(255,92,106,0.45),transparent);
  box-shadow:0 0 22px rgba(255,92,106,0.28);
}
body.tunnel #drive-alert:not(.hidden):not([data-dflow-loss="1"]){
  background:linear-gradient(90deg,transparent,rgba(63,224,197,0.32),transparent);
  box-shadow:0 0 26px rgba(63,224,197,0.18);
}

/* Uncertainty: marker “breathes” — not a label */
.vehicle-wrap.dflow-uncertain .vehicle-arrow svg{
  animation:dflowBreathe 2.2s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(63,224,197,0.35));
}
@keyframes dflowBreathe{
  0%,100%{opacity:.78;}
  50%{opacity:1;}
}

/* Turn card: one decision — meta is secondary */
body.dflow.driving-mode #turn-card .turn-meta{opacity:.72;}
body.dflow.driving-mode #turn-card .turn-text{font-weight:800;letter-spacing:-0.02em;}

/* Stagger — instruction builds, not pops */
#turn-card.visible.dflow-stagger .turn-dist{
  animation:dflowTurnIn .42s var(--ease) both;
}
#turn-card.visible.dflow-stagger .turn-text{
  animation:dflowTurnIn .48s var(--ease) .07s both;
}
#turn-card.visible.dflow-stagger .turn-meta{
  animation:dflowTurnIn .52s var(--ease) .14s both;
}
@keyframes dflowTurnIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* Pills — converge in when thresholds cross */
#pill-speed.dflow-pop,#pill-eta.dflow-pop{
  animation:dflowPop .48s var(--ease) both;
}
@keyframes dflowPop{
  from{opacity:0;transform:scale(.88);}
  to{opacity:1;transform:scale(1);}
}

/* Destination — pulse harder when close */
.dest-marker{
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.dest-marker.dest-near{
  animation:destNearPulse 1.1s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(58,141,255,0.45),0 0 18px rgba(63,224,197,0.55);
}
@keyframes destNearPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.18);}
}

/* Reroute — fades in/out, not a hard show */
.reroute-overlay{
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.94);
  padding:20px 32px;
  background:rgba(11,15,20,0.94);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(63,224,197,0.22);
  border-radius:18px;
  z-index:250;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.reroute-overlay.visible{
  display:block;
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
  animation:rerouteIn .4s var(--ease) both;
}
.reroute-overlay-icon{font-size:30px;margin-bottom:8px;}
.reroute-overlay-text{font-size:15px;font-weight:700;letter-spacing:-0.02em;}
@keyframes rerouteIn{
  from{opacity:0;transform:translate(-50%,-48%) scale(.92);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}