/**
 * styles.css — Measure App Styles
 *
 * Two visual layers:
 *   1. Landing page: shown before AR starts (dark background, centered card)
 *   2. AR overlay: shown during the AR session (transparent, floats over camera)
 *
 * The AR overlay uses a "pointer-events: none" container with "auto" on
 * children, so taps pass through to WebXR except on actual UI elements.
 */


/* ── Reset & Base ──
   Strip default margins/padding and use border-box sizing everywhere.
   Body fills the viewport with a dark background (visible before AR starts)
   and overflow:hidden to prevent scrolling during the AR session. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #111;
    color: #fff;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}


/* ══════════════════════════════════════════════════════════════════
   LAYER 1: Landing Page
   Displayed before the user enters AR. Centers a card with the
   title, instructions, "Enter AR" button, and browser warnings.
   ══════════════════════════════════════════════════════════════════ */

/* Full-screen flex container — vertically and horizontally centers the card */
#landing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
}

/* The card itself — constrained to 360px so it looks good on phones */
.landing-card {
    text-align: center;
    max-width: 360px;
}

.landing-card h1 {
    font-size: 2rem;
    margin-bottom: 12px;
}

/* Subdued text for instructions */
.landing-card p {
    font-size: 1rem;
    color: #aaa;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Red warning text for "WebXR not supported" and "Not HTTPS" messages.
   Uses !important to override the grey paragraph color above. */
.warning {
    color: #ff6b6b !important;
    font-size: 0.9rem !important;
}

/* Style the "Enter AR" button that Three.js ARButton injects into
   #ar-button-container. Blue pill shape, large tap target. */
#ar-button-container button {
    padding: 14px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    background: #4488ff;
    color: #fff;
    cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════════
   LAYER 2: AR Overlay
   Displayed on top of the camera feed during the AR session.
   This div is passed to WebXR as domOverlay.root. It covers the
   full viewport but is transparent (pointer-events: none) so taps
   pass through to the WebXR scene. Individual child elements
   re-enable pointer-events so buttons remain tappable.
   ══════════════════════════════════════════════════════════════════ */

#ar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;  /* let taps pass through to WebXR */
}

/* Re-enable pointer events on direct children (buttons, status, etc.)
   so they can receive taps while the overlay itself is transparent. */
#ar-overlay > * {
    pointer-events: auto;
}


/* ── Status Text ──
   Instructional message at the top of the screen ("Looking for surfaces...",
   "Surface detected", etc.). Uses text-shadow for readability over the
   camera feed. pointer-events: none so it doesn't block taps. */

#status {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    padding: 8px 16px;
    pointer-events: none;
}


/* ── Crosshair ──
   A pure-CSS "+" symbol at the exact center of the screen.
   The WebXR hit test ray is cast from this point, so the crosshair
   shows the user exactly where their marker will be placed.
   40x40px container with two 2px-thick lines (horizontal + vertical). */

#crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    pointer-events: none;  /* purely visual, never intercepts taps */
}

/* Shared styles for both crosshair lines — semi-transparent white */
.crosshair-h,
.crosshair-v {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 1px;
}

/* Horizontal line — stretches full width of the 40px container */
.crosshair-h {
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
}

/* Vertical line — stretches full height of the 40px container */
.crosshair-v {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
}


/* ── Distance Readout ──
   Large bold text showing the current measurement ("45.2 cm" or "1.23 m").
   Positioned above the bottom controls bar. Text-shadow for contrast
   against the camera feed. Hidden until measuring begins. */

#distance {
    position: absolute;
    bottom: 140px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    pointer-events: none;
}


/* ── Bottom Controls Bar ──
   Flex container pinned to the bottom of the screen. Holds the
   Reset button (left) and Place Marker button (center). */

#controls {
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    z-index: 10;
}


/* ── Place Marker Button (Primary) ──
   Styled like a camera shutter button — a 72px circle with a thick
   white border and a solid white inner circle (via ::after pseudo-element).
   font-size: 0 hides the button text while keeping it accessible.
   Shrinks slightly on press for tactile feedback. */

.btn-primary {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0;       /* hide text label — button is icon-only */
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    position: relative;
}

/* Inner white circle — the solid "shutter" dot inside the ring */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    transition: background 0.2s;
}

/* Disabled state — faded out when no surface is detected (IDLE state) */
.btn-primary:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Press feedback — shrink slightly on tap */
.btn-primary:active:not(:disabled) {
    transform: scale(0.92);
}

/* Press feedback — inner circle darkens on tap */
.btn-primary:active:not(:disabled)::after {
    background: #ddd;
}


/* ── Reset Button (Secondary) ──
   Pill-shaped outline button. Semi-transparent dark background so
   it's visible over both light and dark camera feeds.
   Lightens on press for feedback. */

.btn-secondary {
    padding: 10px 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

/* Press feedback — background lightens */
.btn-secondary:active {
    background: rgba(255, 255, 255, 0.15);
}


/* ── Mode Toggle Button ──
   Persistent pill button in the top-right corner of the AR overlay.
   Switches between Measure and Place Radiator modes. */

.btn-mode {
    position: absolute;
    top: 60px;
    right: 16px;
    padding: 8px 16px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    z-index: 10;
}

/* Active mode highlight — shown when placement mode is active */
.btn-mode.active {
    background: rgba(68, 136, 255, 0.6);
    border-color: #4488ff;
}


/* ── Touch Surface ──
   Full-screen transparent layer for drag/rotate gestures during adjustment.
   Sits below buttons (z-index: 1) so depth controls and bottom bar remain tappable. */

#touch-surface {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    touch-action: none;
}


/* ── Depth Controls ──
   Vertically stacked pill buttons on the right side of the screen.
   Used in adjustment mode to move the model closer/further from the wall. */

#depth-controls {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
}

.btn-depth {
    padding: 10px 14px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

.btn-depth:active {
    background: rgba(68, 136, 255, 0.6);
    border-color: #4488ff;
}


/* ── Model Picker Panel ──
   Bottom sheet that slides up after measurement to suggest matching models. */

#model-picker {
    position: absolute;
    bottom: 100px;
    left: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 14px 16px;
    z-index: 10;
    animation: slide-up 0.25s ease-out;
}

@keyframes slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.model-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#model-picker-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

.btn-link {
    background: none;
    border: none;
    color: #4488ff;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
}

#model-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
}

.model-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.model-card:active {
    background: rgba(68, 136, 255, 0.3);
}

.model-card.match {
    border-color: rgba(68, 255, 136, 0.6);
    background: rgba(68, 255, 136, 0.1);
}

.model-card .model-name {
    font-weight: 500;
}

.model-card .model-width {
    font-size: 0.75rem;
    color: #aaa;
    font-weight: 400;
}