/* Scoped public WSG raster image viewer. */
body.wsg-image-viewer-open { overflow: hidden; }
#imageModal[hidden] { display: none !important; }
#imageModal {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: grid;
    place-items: center;
    padding: 20px;
    background: var(--surface-overlay, rgba(2, 7, 15, .9));
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
}
.wsg-image-viewer-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1480px, 96vw);
    height: min(900px, 94vh);
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--surface-border, rgba(166, 189, 227, .32));
    border-radius: 18px;
    background: var(--surface-glass-strong, #111b2b);
    box-shadow: var(--surface-shadow, 0 24px 70px rgba(0, 0, 0, .48));
}
.wsg-image-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--surface-border, rgba(166, 189, 227, .32));
    background: var(--surface-glass, #1c2a40);
}
.wsg-image-viewer-title {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text, #f4f7fb);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wsg-image-viewer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.wsg-image-viewer-actions button {
    min-width: 38px;
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid var(--surface-border, rgba(166, 189, 227, .32));
    border-radius: 9px;
    background: var(--surface-glass-strong, #111b2b);
    color: var(--color-text, #f4f7fb);
    cursor: pointer;
    font: 700 .86rem "Roboto", sans-serif;
}
.wsg-image-viewer-actions button:hover,
.wsg-image-viewer-actions button:focus-visible { border-color: var(--surface-border-strong, var(--surface-border, #8ea1c0)); color: var(--color-primary, #2f6fed); }
.wsg-image-viewer-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #071014;
    touch-action: none;
}
.wsg-image-viewer-stage:focus-visible { outline: 2px solid var(--color-primary, #2f6fed); outline-offset: -3px; }
.wsg-image-viewer-stage.is-zoomed { cursor: grab; }
.wsg-image-viewer-stage.is-dragging { cursor: grabbing; }
.wsg-image-viewer-stage img {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    max-width: none;
    max-height: none;
    user-select: none;
    transform-origin: center center;
    transition: transform 80ms ease-out;
    will-change: transform;
    -webkit-user-drag: none;
}
.wsg-image-viewer-stage.is-dragging img { transition: none; }
@media (max-width: 600px) {
    #imageModal { padding: 8px; }
    .wsg-image-viewer-shell { width: 100%; height: 96vh; border-radius: 12px; }
    .wsg-image-viewer-toolbar { align-items: flex-start; flex-direction: column; }
    .wsg-image-viewer-actions { justify-content: flex-start; }
}