/*
  Velvet Wayz responsive drive layout.
  Layout-only authority:
  - no GPS watcher
  - no route writes
  - no MapLibre calls
  - no camera/microphone ownership
*/

: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: env(safe-area-inset-bottom, 0px);
  --vw-layout-bottom-reserved: 18px;
  --vw-layout-layer-top: calc(var(--vw-layout-safe-top) + 108px);
  --vw-layout-end-route-top: calc(var(--vw-layout-safe-top) + 198px);
  --vw-layout-control-size: clamp(68px, 13.4vw, 92px);
  --vw-layout-motion-distance: calc(100vw + 260px);
}

/* Exact persistent controls that must remain accessible while driving. */
[data-vw-layout-role="layer"],
[data-vw-layout-role="end-route"],
[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 stays in its approved upper-right rail position 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;
}

/* The existing red route-end control is always below the layer control. */
[data-vw-layout-role="end-route"] {
  position: fixed !important;
  top: var(--vw-layout-end-route-top) !important;
  right: var(--vw-layout-side-gap) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2147482600 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/*
  Music and microphone remain above the real bottom player and iOS home area.
  JS supplies --vw-layout-bottom-reserved from the rendered bottom player.
*/
[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 the exact non-driving controls tagged by the 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;
}

/* The end-route control, music and microphone never slide away. */
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"] {
  transform: translate3d(0,0,0) !important;
  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:
  - top three quarters: restore every hidden tile
  - bottom quarter: restore/confirm music only
  - no tile is re-parented or repositioned
*/
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;
}

/* Compact-height phones, including iPhones with browser chrome. */
@media (max-height: 760px) {
  :root {
    --vw-layout-control-size: clamp(62px, 12.5vw, 78px);
    --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;
  }
}

/* Narrow iPhone widths: keep the right rail inside the visual viewport. */
@media (max-width: 430px) {
  :root {
    --vw-layout-side-gap: max(12px, env(safe-area-inset-right, 0px));
    --vw-layout-control-size: clamp(60px, 17vw, 76px);
  }
}