/* Image viewer for the document-display pipeline (DocumentViewer →
   ImageViewer view component).

   Composition:
     .app-image-viewer-container       outer wrapper (stacks toolbar + frame)
       .app-image-viewer-buttons       zoom/reset toolbar above the image
       .app-image-view-container       framed surface holding the image
         img.app-image-view            the actual image
       .app-image-viewer-load-on-demand  fallback "Load image" button block

   The frame (.app-image-view-container) carries the visual chrome — a soft
   surface-alt background, hairline border, rounded corners — so off-aspect
   images letterbox cleanly inside it. The caller sets the frame's explicit
   height via inline style (e.g. style="height:400px") and the image fills
   the frame in both dimensions with object-fit:contain, so its aspect
   ratio is preserved and it never overflows.

   Lives in @layer components so it wins over the @layer base img reset
   (which sets height: auto on every img and would otherwise let the
   image grow to its natural height and break out of the frame). */

@layer components {

    .app-image-fluid {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .app-image-viewer-container {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        width: 100%;
    }

    .app-image-viewer-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
    }

    /* Frame is a flex centering box. Caller sets explicit height via inline
       style (e.g. style="height:400px"); the image inside renders at its
       natural size, constrained to never exceed the frame, and centers
       horizontally + vertically. */
    .app-image-view-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: var(--color-surface-alt);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .app-image-view {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .app-image-viewer-load-on-demand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
    }
}