/* WebARTemplate - layering.
 *
 * Unity owns the display. The camera feed is rendered INSIDE Unity as a
 * background texture (see WebARCameraBackground), so there's no alpha
 * compositing between DOM layers. MindAR still needs its <video> element
 * to drive the tracker, but that element is hidden from view.
 */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* 100lvh = "large viewport height", the viewport at its MAX extent -
   * includes browser chrome areas that auto-hide (Safari's bottom bar)
   * and areas beneath the home indicator / notch. Paired with
   * viewport-fit=cover on the <meta viewport>, this lets fixed-position
   * children (Unity canvas, camera-feed container, overlays) extend
   * fully into the unsafe areas so the AR render isn't letterboxed by
   * the device chrome. Fallback to 100% for older browsers that don't
   * know lvh. */
  height: 100%;
  height: 100lvh;
  overflow: hidden;
  background: #000;
  -webkit-text-size-adjust: 100%;
}

body {
  touch-action: none;
}

/* MindAR's container + its injected <video> are hidden from the user, but
 * we deliberately DO NOT use `visibility: hidden` or `display: none` or a
 * 1×1 size - iOS Safari's autoplay policy pauses <video> elements whose
 * visibility is hidden or that are effectively off-screen, and the
 * getUserMedia-fed tracker video falls under the same rule. Previous
 * setup was `1px × 1px; visibility: hidden` which froze the camera feed
 * after a single frame on iOS Safari (mind-ar-js would never receive
 * subsequent frames because the video element was paused by Safari's
 * visibility enforcement).
 *
 * Instead: position at full viewport so Safari considers it "on screen",
 * set opacity to 0 so the user doesn't see it, and push it behind
 * Unity's opaque canvas with z-index. Unity's canvas covers it
 * entirely, so visually the user only sees Unity - same end result,
 * but Safari doesn't pause the camera. */
#webar-container {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

#unity-canvas {
  position: fixed;
  /* Explicitly size the canvas to cover the FULL device - including
   * the notch / status-bar area above the safe-area and the home-
   * indicator area below. The earlier `inset: 0` + `100lvh` approach
   * relied on viewport-fit=cover being honoured by the browser; in
   * practice some iOS Safari builds and certain PWA launch modes
   * still treat 100vh / 100lvh as the "safe viewport" (excluding the
   * notch + bottom bar), leaving black strips above and below the
   * camera feed.
   *
   * Formula: position the canvas's top-left at NEGATIVE the top /
   * left safe-area insets so its origin is at the physical device
   * corner, then extend its dimensions by (top + bottom) and
   * (left + right) insets. On devices without insets (desktop,
   * older mobiles) env() returns 0 and this collapses to
   * `top: 0; left: 0; width: 100vw; height: 100vh` - no change.
   * On iPhones with a notch / home indicator, the canvas now
   * extends through those areas so the camera feed reaches the
   * physical edges of the screen. */
  top: calc(-1 * env(safe-area-inset-top, 0px));
  left: calc(-1 * env(safe-area-inset-left, 0px));
  width: calc(100vw + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  height: calc(100vh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  outline: none;
  touch-action: none;
}

/* The status banner renders a multi-line snapshot of current
 * diagnostic values on top of Unity's canvas. Default-hidden so release
 * builds don't expose it; WebARImageTracker.Start on the Unity side
 * calls WebARBridge.SetDiagnosticsVisible(true) to show it when the
 * user ticks the "Show Diagnostics Overlay" checkbox on the tracker
 * component. The JS side (window.__webARSetDiagnosticsVisible in
 * webar-bridge.js) flips `display` based on that call. Error banners
 * override this default - setError() and the jslib module-load-timeout
 * path both force display:block so unrecoverable failures are always
 * visible. */
#ar-status {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  margin: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  text-align: left;
  white-space: pre;
  z-index: 2147483647;
  /* pointer-events: auto so iOS Safari can bind touch gestures to
     this element for overflow scrolling. The advanced-controls
     section in the Tracking tab grows the banner past max-height,
     and `overflow: auto` only scrolls if the scrollable element
     itself receives the touch - pointer-events: none blocked that
     and made the bottom sliders unreachable. Banner is fixed-top
     capped at 55vh; the user can minimise via ▲ to reclaim the
     top region of the screen for AR interactions. */
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  border: 0;
  width: 100%;
  max-height: 55vh;
  overflow-y: auto;
  display: none;
  appearance: none;
  -webkit-appearance: none;
}

/* ── Loading / Start overlay ─────────────────────────────────────────────
 *
 * Solid-black full-viewport cover shown over Unity's canvas until the
 * user taps Start. Three intentional roles:
 *   1. Hides the white-canvas flash between page load and the first
 *      camera frame (Unity's clear-color is solid black, but the gap
 *      between #unity-canvas being painted and the WebAR background
 *      quad receiving its first texture is a visible bright instant
 *      otherwise).
 *   2. Provides the user-gesture surface that iOS WebKit requires to
 *      grant DeviceMotionEvent.requestPermission and AudioContext.resume.
 *   3. Acts as a loading screen while AR initialises - the pulsing
 *      ring is the "something's happening" affordance.
 *
 * Two visual states, driven by classes:
 *   default state                Label "Loading…", dim ring.
 *   .webar-start-ready           Label "Start", bright pulsing ring,
 *                                cursor:pointer (taps are accepted).
 *   .webar-start-dismissed       Opacity → 0, pointer-events: none so
 *                                taps reach Unity once the fade
 *                                completes; the JS controller toggles
 *                                display:none after the transition.
 *
 * z-index 100 places it ABOVE Unity's canvas (1) and the screen fades
 * (40) but BELOW the diagnostic banner (max int) so an error banner
 * pre-empts a stuck Loading state. */
#webar-start-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 500ms ease-out;
  pointer-events: auto;
  cursor: default;
  /* Suppress the iOS tap highlight so the overlay doesn't flash blue
   * around its bounding box on touch - looks like a UI bug otherwise. */
  -webkit-tap-highlight-color: transparent;
}

#webar-start-overlay.webar-start-ready {
  cursor: pointer;
}

#webar-start-overlay.webar-start-dismissed {
  opacity: 0;
  pointer-events: none;
}

#webar-start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  user-select: none;
  -webkit-user-select: none;
}

/* Three softly-pulsing dots - the minimal loading affordance. Dim + gentle
 * while initialising; brighter + a touch quicker once Start is tappable. The
 * staggered animation-delays give the classic left-to-right "thinking" wave.
 * Same elements throughout - the .webar-start-ready class just swaps colour
 * + rate. */
#webar-start-dots {
  display: flex;
  gap: 11px;
}

#webar-start-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: webar-start-dot 1.4s ease-in-out infinite both;
}

#webar-start-dots span:nth-child(2) { animation-delay: 0.16s; }
#webar-start-dots span:nth-child(3) { animation-delay: 0.32s; }

#webar-start-overlay.webar-start-ready #webar-start-dots span {
  background: rgba(255, 255, 255, 0.92);
  animation-duration: 1s;
}

@keyframes webar-start-dot {
  0%, 70%, 100% { transform: scale(0.7); opacity: 0.35; }
  35%           { transform: scale(1);   opacity: 1; }
}

#webar-start-label {
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, 'SF Pro Rounded',
               'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 250ms ease-out;
}

#webar-start-overlay.webar-start-ready #webar-start-label {
  color: rgba(255, 255, 255, 0.95);
}