/* Eddie Vault 1.9.8 — keep viewer arrows inside the media stage.
   The inline My Vault player stacks the image and details on mobile. When the
   nav buttons live outside the stage, their absolute positioning can land over
   the details column and look like tall black bars. The arrows now belong to
   the media surface and stay above the crop mask without stealing crop drags. */
.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav,
.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__counter {
    z-index: 140 !important;
}

.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav--prev {
    left: 14px !important;
}

.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav--next {
    right: 14px !important;
}

.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__counter {
    pointer-events: none !important;
}

.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__crop-layer {
    z-index: 70 !important;
}

.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__image-frame,
.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__poster,
.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__fallback,
.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__audio {
    z-index: 1;
}

@media (max-width: 760px) {
    body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage {
        isolation: isolate !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav {
        top: 50% !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        background: rgba(5, 10, 17, 0.74) !important;
        box-shadow: 0 12px 30px rgba(0,0,0,.32) !important;
        transform: translateY(-50%) !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav--prev {
        left: 8px !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav--next {
        right: 8px !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-nav-idle .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav--prev {
        transform: translateY(-50%) translateX(-5px) scale(.96) !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-nav-idle .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav--next {
        transform: translateY(-50%) translateX(5px) scale(.96) !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__counter {
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        max-width: calc(100% - 76px) !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side .eddie-my-vault-viewer__nav,
    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side .eddie-my-vault-viewer__counter {
        display: none !important;
        pointer-events: none !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-crop-profile .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Eddie Vault 1.9.9 — mobile browser access + persistent stage arrows.
   The media arrows are rendered inside the stage every time the preview changes.
   The mobile Browse Vault trigger is now fixed near the top of the viewport so
   the library drawer is reachable even after scrolling through the item details. */
.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav,
.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__counter {
    position: absolute !important;
}

.eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav:not([hidden]) {
    display: inline-flex !important;
    opacity: 1;
    visibility: visible;
}

@media (min-width: 761px) {
    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav {
        z-index: 170 !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__crop-layer {
        z-index: 70 !important;
    }
}

@media (max-width: 760px) {
    body.eddie-my-vault-page.eddie-vault-library-open,
    html.eddie-vault-library-open body.eddie-my-vault-page {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__browse,
    body.eddie-my-vault-page .eddie-vault-shell__browse {
        position: fixed !important;
        top: max(74px, calc(env(safe-area-inset-top, 0px) + 74px)) !important;
        left: max(14px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 175 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        max-width: calc(100vw - 28px) !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        background: rgba(7, 14, 24, 0.92) !important;
        border: 1px solid rgba(145, 203, 255, 0.24) !important;
        color: #f7fbff !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        pointer-events: auto !important;
    }

    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__browse::before,
    body.eddie-my-vault-page .eddie-vault-shell__browse::before {
        content: "☰";
        margin-right: 8px;
        font-size: 15px;
        line-height: 1;
    }

    .eddie-my-vault--shell.is-library-open .eddie-vault-shell__browse {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__library,
    body.eddie-my-vault-page .eddie-vault-shell__library {
        z-index: 190 !important;
    }

    .eddie-my-vault--shell.is-library-open::after {
        z-index: 180 !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav:not([hidden]) {
        display: inline-flex !important;
        opacity: .96 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 165 !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__counter:not([hidden]) {
        display: inline-flex !important;
        z-index: 164 !important;
    }

    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-crop-profile .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__nav,
    .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-crop-profile .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__counter {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


