/* Small set of styles that can't be cleanly expressed as Tailwind utilities.
   Kept in a plain CSS file (not input.css) so the dev CDN workflow sees them
   without re-running the Tailwind build. Loaded from _base.html everywhere. */

/* Default model-viewer sizing (used anywhere we embed a 3D viewer outside
   the AR page). Room-corner gradient so the door always has visual context. */
model-viewer {
    display: block;
    width: 100%;
    height: 60dvh;
    --poster-color: transparent;
    background:
        linear-gradient(
            to bottom,
            #e8eef5 0%,
            #dbe3ee 55%,
            #b39b7d 55%,
            #8b6f4e 100%
        );
}

/* AR page: viewer fills its flex parent so the whole screen is the door.
   Background is a soft room-corner gradient (wall above, wooden floor below)
   so the 3D preview reads as "door sitting in a room" rather than "door on
   a blank sheet of paper". When the user taps "View in your space"
   model-viewer enters native AR and the phone camera replaces this
   background entirely. */
model-viewer.ar-full {
    width: 100%;
    height: 100%;
    min-height: 320px;
    background:
        linear-gradient(
            to bottom,
            #e8eef5 0%,
            #dbe3ee 55%,
            #b39b7d 55%,
            #8b6f4e 100%
        );
}

/* Hide model-viewer's built-in AR button — we provide our own via slot. */
model-viewer::part(default-ar-button) {
    display: none;
}

/* Floating "View in your space" pill on the AR page. Pinned near the bottom
   of the viewer, safe-area-aware. High z-index so it sits above any overlay
   panels (no-AR hint, info card). */
.ar-cta {
    position: absolute !important;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

/* Utility: hide overflow scrollbars on horizontal thumbnail strips. */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Offline indicator banner added dynamically by app.js. */
.offline-banner {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}