.awv-trigger-container {
    display: inline-block;
    margin-right: 15px;
}

.awv-show-on-wall-link {
    cursor: pointer;
    font-weight: 500;
    text-decoration: underline;
    /* User can optionally style this globally */
}

.awv-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.awv-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
}

.awv-modal-content {
    position: relative;
    z-index: 10;
    background: #fff;
    padding: 30px;
    border-radius: var(--p1-radius-md, 8px);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.awv-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #333;
    line-height: 1;
}

.awv-modal-close:hover {
    color: #000;
}

.awv-controls {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: inherit;
    font-size: 14px;
}

.awv-controls .awv-slider {
    width: 200px;
}

.wall-mockup {
    position: relative;
    display: inline-block;
}

.room-image {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    object-fit: contain;
}

.art-image {
    position: absolute;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: top 0.1s ease-out; /* Smooth slide for height adjust */
}

/* NOTE (2026-07-19): the sitewide artwork drop-shadow (and the
   .p1-slider overflow flip) moved to the THEME — see
   p1artist-theme/assets/css/p1-artwork.css (--p1-shadow-artwork tokens).
   This file now styles only the visualizer's own UI. */

/* 2x darker shadow on the visualizer's own artwork in dark mode */
html.dark .art-image {
    box-shadow: 0 10px 22px rgba(0,0,0,0.6) !important;
    filter: drop-shadow(0px 10px 22px rgba(0,0,0,0.4)) !important;
}

/* Dark mode: panel follows the theme tokens (fallbacks keep the plugin
   safe if the theme's tokens are absent) */
html.dark .awv-modal-content {
    background: var(--p1-bg, #1a1a1a);
    border: 1px solid var(--p1-border, #2a2a2a);
}
html.dark .awv-modal-close {
    color: var(--p1-text-muted, #c4c4c4);
}
html.dark .awv-modal-close:hover {
    color: #fff;
}

/* ── View slider (#16): closeups → wall scene → gallery extras ──────────────
   Rendered only when the slide list has more than one entry; the single-view
   modal keeps the exact pre-#16 markup and styling above.

   #16b (owner): the arrows must never cover the slides, and must not move
   while clicking through them. So the slider modal composes as a flex row on
   the overlay — [arrow] [panel] [arrow] — and the slide viewport is a
   fixed-size STAGE (--awv-stage-w × --awv-stage-h, constant per viewport):
   every slide letterboxes inside it, so the panel, arrows, dots and label
   hold one geometry on every slide. ≤700px (no room for a gutter) the arrows
   and the dots pill pin to the bottom of the viewport instead — media block
   below. Arrows keep the .p1-slider__arrow house glass-circle spec. */
.awv-modal--slider {
    gap: 16px;
    /* Stage = the fixed slide viewport. 240px = 2 arrows + 2 gaps + panel
       padding + slack; the .75 ratio caps stage height on short screens. */
    --awv-stage-w: min(960px, calc(100vw - 240px));
    --awv-stage-h: min(70vh, calc(var(--awv-stage-w) * 0.75));
}
.awv-modal--slider .awv-modal-content { min-width: 0; }

/* Hydration feedback floats OVER the stage — stacked above it, it would
   reflow the panel (and shift the arrows) while a slide loads. */
.awv-modal--slider .awv-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    margin: 0;
}

.awv-slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}
.awv-modal--slider .awv-slider {
    width: var(--awv-stage-w);
    height: var(--awv-stage-h);
}
.awv-slide { display: none; }
.awv-slide.active {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.awv-slide-img {
    display: block;
    max-width: 100%;
    max-height: var(--awv-stage-h, 70vh);
    width: auto;
    height: auto;
}
/* The wall scene obeys the stage too (the single-view modal above keeps its
   own 75vh — A-00x artworks without extra views are untouched). */
.awv-modal--slider .wall-mockup { max-width: 100%; }
.awv-modal--slider .room-image { max-height: var(--awv-stage-h); }

/* Arrows: house glass circles as FLEX ITEMS in the overlay gutter — flexbox
   makes overlap with the panel impossible. They render on the dim overlay:
   light mode reads as a white disc on near-black; dark mode adds the glass
   hairline (below) so the disc keeps an edge. JS sets --awv-arrow-nudge
   (constant across slides, because the stage is fixed) to center them on the
   stage rather than the whole panel; hover zoom rides the standalone `scale`
   property so the nudge itself never animates. */
.awv-slider__arrow {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, scale .15s;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    color: #333;
    transform: translateY(var(--awv-arrow-nudge, 0px));
}
.awv-slider__arrow:hover { background: #fff; scale: 1.08; }
.awv-slider__arrow svg  { width: 20px; height: 20px; }

.awv-slider__footer {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.awv-slide-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p1-text-muted, #565656);
}
.awv-slider__dots {
    display: flex;
    gap: 8px;
}
.awv-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--p1-border, #eaeaea);
    cursor: pointer;
    transition: background .15s;
}
.awv-dot:hover { background: var(--p1-text-subtle, #757575); }
.awv-dot.active { background: var(--p1-text, #1a1a1a); }

/* Dark mode (plugin fallbacks mirror the dark token values — guide §1.1).
   The arrows sit on the dim overlay now, so dark mode adds the floating-
   island glass hairline — without it the dark disc vanishes into the
   near-black overlay; the #c4c4c4 icon carries the contrast. */
html.dark .awv-slider__arrow { background: rgba(26,26,26,.85); color: var(--p1-text-muted, #c4c4c4); border: 1px solid var(--p1-glass-border, #333); }
html.dark .awv-slider__arrow:hover { background: #1a1a1a; color: #fff; }
html.dark .awv-slide-label { color: var(--p1-text-muted, #c4c4c4); }
html.dark .awv-dot { background: var(--p1-border, #2a2a2a); }
html.dark .awv-dot:hover { background: var(--p1-text-subtle, #999); }
html.dark .awv-dot.active { background: var(--p1-text, #eaeaea); }

/* ── #16b mobile (≤700px, where the desktop gutter runs out): the owner's
   bottom bar — prev arrow · label+dots glass pill · next arrow — pinned to
   the bottom of the viewport (env(safe-area-inset-bottom) clears the iOS
   home bar). The modal reserves the bar zone with padding-bottom and caps
   the stage, so the bar can never cover a slide; every piece is viewport-
   fixed, so the controls hold one position on every slide. Glass surfaces
   ride the floating-island tokens (--p1-glass-*, radius-pill). ───────────── */
@media (max-width: 700px) {
    .awv-modal--slider {
        padding: 12px 12px calc(64px + env(safe-area-inset-bottom, 0px));
        /* stage: 84px = modal 24 + panel padding 60; height ratio 1.25 =
           the tallest expected slide (the 4:5 closeup crops), capped so
           stage + panel chrome always clears the 64px bar zone */
        --awv-stage-w: calc(100vw - 84px);
        --awv-stage-h: min(calc(var(--awv-stage-w) * 1.25), calc(100vh - 148px));
    }
    .awv-modal--slider .awv-modal-content {
        max-height: calc(100vh - 88px);
    }
    .awv-modal--slider .awv-slider__arrow {
        position: fixed;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 30;
    }
    .awv-modal--slider .awv-slider__arrow--prev { left: 16px; }
    .awv-modal--slider .awv-slider__arrow--next { right: 16px; }
    .awv-modal--slider .awv-slider__footer {
        position: fixed;
        left: 50%;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 30;
        margin: 0;
        justify-content: center;
        gap: 4px;
        min-height: 44px;
        box-sizing: border-box;
        padding: 5px 18px;
        /* stable pill: labels vary per slide ("Detail 2" / "On a wall") — the
           min-width absorbs that so the bar never resizes while navigating */
        min-width: min(200px, calc(100vw - 136px));
        max-width: calc(100vw - 136px); /* clears the two corner arrows */
        background: var(--p1-glass-bg, rgba(255,255,255,.92));
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid var(--p1-glass-border, rgba(0,0,0,.05));
        border-radius: var(--p1-radius-pill, 999px);
    }
    /* ≥44px-tall tap area for each dot (visual size unchanged; width is
       bounded by the 16px gap so neighbours' targets can't overlap) */
    .awv-modal--slider .awv-slider__dots { gap: 16px; }
    .awv-modal--slider .awv-dot { position: relative; }
    .awv-modal--slider .awv-dot::after {
        content: '';
        position: absolute;
        left: -8px;
        right: -8px;
        top: -18px;
        bottom: -18px;
    }
    html.dark .awv-modal--slider .awv-slider__footer {
        background: var(--p1-glass-bg, rgba(26,26,26,.92));
        border-color: var(--p1-glass-border, #333);
    }
}

/* Dynamic-viewport correction where supported (iOS URL bar collapse) */
@supports (height: 100dvh) {
    @media (max-width: 700px) {
        .awv-modal--slider {
            --awv-stage-h: min(calc(var(--awv-stage-w) * 1.25), calc(100dvh - 148px - env(safe-area-inset-bottom, 0px)));
        }
        .awv-modal--slider .awv-modal-content {
            max-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px));
        }
    }
}