/* =============================================================================
   Full-screen photo viewer: a native <dialog> over the page.
   =============================================================================

   Behaviour: static/js/controllers/esm/photo_viewer_controller.js.
   Used by templates/directory/listing.html (a grid of work photos, with
   previous/next and a count) and templates/components/support_thread.html
   (one chat photo at a time).

   The close button clears the status bar in the native shells through
   --safe-top. Public pages do not load the token layer, so every token here
   carries its fallback. */

.photo-viewer {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(26, 26, 26, 0.94);
}

.photo-viewer::backdrop { background: rgba(26, 26, 26, 0.6); }

.photo-viewer[open] {
    display: grid;
    place-items: center;
}

.photo-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-viewer-btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: rgb(var(--c-ink-white, 255, 255, 255));
    font-size: 1.1rem;
}

.photo-viewer-close { top: calc(14px + var(--safe-top, 0px)); right: 14px; }
.photo-viewer-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.photo-viewer-next { right: 10px; top: 50%; transform: translateY(-50%); }

.photo-viewer-count {
    position: absolute;
    bottom: calc(16px + var(--safe-bottom, 0px));
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
}