/*
  Velvet Wayz responsive drive layout — R5Y2.
  Layout-only authority:
  - no GPS watcher
  - no route writes
  - no MapLibre route ownership
  - one visual viewport + safe bottom contract
  - Recenter stays in its approved right rail
  - End Route occupies only the open slot directly above Music
*/

:root {
  --vw-layout-side-gap: max(14px, env(safe-area-inset-right, 0px));
  --vw-layout-left-gap: max(14px, env(safe-area-inset-left, 0px));
  --vw-layout-safe-top: env(safe-area-inset-top, 0px);
  --vw-layout-safe-bottom: max(
    env(safe-area-inset-bottom, 0px),
    var(--vw-visual-safe-bottom, 0px)
  );
  --vw-layout-bottom-reserved: 72px;
  --vw-layout-layer-top: calc(var(--vw-layout-safe-top) + 108px);
  --vw-layout-control-size: clamp(62px, 13.4vw, 82px);
  --vw-layout-route-control-size: clamp(50px, 13vw, 62px);
  --vw-layout-motion-distance: calc(100vw + 260px);
}

/* Exact persistent controls that remain accessible while driving. */
[data-vw-layout-role="layer"],
[data-vw-layout-role="music"],
[data-vw-layout-role="microphone"],
[data-vw-layout-role="eye"] {
  box-sizing: border-box !important;
  max-width: var(--vw-layout-control-size) !important;
  max-height: var(--vw-layout-control-size) !important;
}

/* Layer remains in the approved upper-right rail while stopped. */
[data-vw-layout-role="layer"] {
  position: fixed !important;
  top: var(--vw-layout-layer-top) !important;
  right: var(--vw-layout-side-gap) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2147482500 !important;
}

/*
  R5Y2 founder correction — one-control move only:
  - Recenter remains in the approved right-side rail.
  - Search remains where it is.
  - Music remains where it is.
  - Microphone remains where it is.
  - End Route occupies the open lower-right slot directly above Music.
*/
#vwRightRail #vwCenterBtn {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

#vwRouteEndSlotR5Z {
  position: fixed !important;
  right: var(--vw-layout-side-gap) !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(
    var(--vw-layout-bottom-reserved) +
    var(--vw-layout-safe-bottom) +
    var(--vw-layout-control-size) + var(--vw-layout-control-size) +
    42px
  ) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--vw-layout-route-control-size) !important;
  height: var(--vw-layout-route-control-size) !important;
  min-width: var(--vw-layout-route-control-size) !important;
  min-height: var(--vw-layout-route-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147482700 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

#vwRouteEndSlotR5Z[hidden] {
  display: none !important;
}

#vwRouteEndSlotR5Z #vwEndRouteBtn {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 16px !important;
  background: rgba(220,38,38,.96) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Music and microphone remain above the rendered bottom player/home area. */
[data-vw-layout-role="microphone"] {
  position: fixed !important;
  right: var(--vw-layout-side-gap) !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(
    var(--vw-layout-bottom-reserved) +
    var(--vw-layout-safe-bottom) +
    14px
  ) !important;
  z-index: 2147482500 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

[data-vw-layout-role="music"] {
  position: fixed !important;
  right: var(--vw-layout-side-gap) !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(
    var(--vw-layout-bottom-reserved) +
    var(--vw-layout-safe-bottom) +
    var(--vw-layout-control-size) +
    28px
  ) !important;
  z-index: 2147482500 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Motion applies only to exact non-driving controls tagged by JS. */
[data-vw-layout-slide="left"],
[data-vw-layout-slide="right"] {
  transition:
    transform 300ms cubic-bezier(.22,.8,.2,1),
    opacity 180ms ease,
    visibility 0s linear 300ms !important;
  will-change: transform, opacity;
}

body:not(.vw-layout-moving) [data-vw-layout-slide="left"],
body:not(.vw-layout-moving) [data-vw-layout-slide="right"] {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

body.vw-layout-moving [data-vw-layout-slide="left"] {
  transform: translate3d(calc(-1 * var(--vw-layout-motion-distance)),0,0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.vw-layout-moving [data-vw-layout-slide="right"] {
  transform: translate3d(var(--vw-layout-motion-distance),0,0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Essential controls never slide away. */
body.vw-layout-moving #vwRouteEndSlotR5Z,
body.vw-layout-moving [data-vw-layout-role="recenter"],
body.vw-layout-moving [data-vw-layout-role="end-route"],
body.vw-layout-moving [data-vw-layout-role="music"],
body.vw-layout-moving [data-vw-layout-role="microphone"],
body.vw-layout-moving [data-vw-layout-role="eye"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Layer is intentionally removed from the road view while moving. */
body.vw-layout-moving [data-vw-layout-role="layer"] {
  transform: translate3d(var(--vw-layout-motion-distance),0,0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Driving interaction reveal. */
body.vw-layout-moving.vw-layout-reveal-all [data-vw-layout-slide="left"],
body.vw-layout-moving.vw-layout-reveal-all [data-vw-layout-slide="right"],
body.vw-layout-moving.vw-layout-reveal-all [data-vw-layout-role="layer"] {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

body.vw-layout-moving.vw-layout-reveal-music [data-vw-layout-role="music"],
body.vw-layout-moving.vw-layout-reveal-all [data-vw-layout-role="music"] {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.vw-layout-moving.vw-layout-reveal-music [data-vw-layout-role="music"] {
  animation: vw-layout-music-confirm 260ms ease-out 1;
}

@keyframes vw-layout-music-confirm {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

[data-vw-layout-brand] {
  transition:
    transform 300ms cubic-bezier(.22,.8,.2,1),
    opacity 180ms ease,
    visibility 0s linear 300ms !important;
}

body.vw-layout-moving:not(.vw-layout-reveal-all) [data-vw-layout-brand] {
  transform: translate3d(calc(-1 * var(--vw-layout-motion-distance)),0,0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.vw-layout-moving.vw-layout-reveal-all [data-vw-layout-brand] {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

@media (max-height: 760px) {
  :root {
    --vw-layout-control-size: clamp(58px, 12.5vw, 72px);
    --vw-layout-route-control-size: clamp(48px, 12vw, 58px);
    --vw-layout-layer-top: calc(var(--vw-layout-safe-top) + 88px);
  }

  [data-vw-layout-role="music"] {
    bottom: calc(
      var(--vw-layout-bottom-reserved) +
      var(--vw-layout-safe-bottom) +
      var(--vw-layout-control-size) +
      20px
    ) !important;
  }
}

@media (max-width: 430px) {
  :root {
    --vw-layout-side-gap: max(12px, env(safe-area-inset-right, 0px));
    --vw-layout-control-size: clamp(58px, 16vw, 72px);
    --vw-layout-route-control-size: clamp(48px, 13vw, 58px);
  }


  #vwRouteEndSlotR5Z #vwEndRouteBtn {
    border-radius: 14px !important;
  }
}