/* The theme-aware scrim is contextual; controls consume shared DS roles. */
html.cs-image-viewer-open { overflow: hidden; }
html.cs-image-viewer-open .cs-reading-sticky-dropdown { display: none; }
.cs-image-viewer {
    box-sizing: border-box;
    position: fixed;
    z-index: 99990;
    inset: var(--cs-image-viewer-top, 0px) var(--cs-image-viewer-right, 0px) var(--cs-image-viewer-bottom, 0px) var(--cs-image-viewer-left, 0px);
    width: auto;
    height: calc(100vh - var(--cs-image-viewer-top, 0px) - var(--cs-image-viewer-bottom, 0px));
    height: calc(100dvh - var(--cs-image-viewer-top, 0px) - var(--cs-image-viewer-bottom, 0px));
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    padding: calc(var(--cs-control-height) + var(--cs-space-7) + env(safe-area-inset-top)) var(--cs-space-4) calc(var(--cs-control-height) + var(--cs-space-7) + env(safe-area-inset-bottom));
    background: rgba(250, 250, 251, 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--cs-color-text-strong);
    text-align: center;
}
.cs-image-viewer[open] { display: flex; flex-direction: column; gap: var(--cs-space-4); align-items: center; justify-content: center; }
.cs-image-viewer:not([open]), .cs-image-viewer [hidden] { display: none; }
html[data-theme="dark"] .cs-image-viewer { background: rgba(15, 17, 22, 0.5); }
.cs-image-viewer__image { display: block; max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; }
.cs-image-viewer__close {
    position: absolute;
    top: calc(var(--cs-space-4) + env(safe-area-inset-top));
    right: calc(var(--cs-space-4) + env(safe-area-inset-right));
    width: var(--cs-control-height);
    height: var(--cs-control-height);
    padding: 0;
    border: 1px solid var(--cs-color-control-border);
    border-radius: var(--cs-radius-round);
    background: var(--cs-color-surface);
    color: var(--cs-color-text-strong);
    font-size: var(--cs-space-6);
    cursor: pointer;
}
.cs-image-viewer__close:hover {
    background: var(--cs-color-action);
    border-color: var(--cs-color-action);
    color: var(--cs-color-on-action);
}
.cs-image-viewer__caption {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 75%;
    max-width: 100%;
    max-height: 25%;
    overflow: auto;
    margin: 0;
    color: var(--cs-color-text-strong);
    padding: var(--cs-space-3) var(--cs-space-5);
    border: 1px solid var(--cs-color-border);
    border-radius: var(--cs-radius-small);
    background: var(--cs-color-surface);
    box-shadow: var(--cs-shadow-small);
    font-size: var(--cs-font-size-control);
    line-height: 1.6;
    text-wrap: pretty;
}
.cs-image-viewer :focus-visible { outline: var(--cs-focus-width) solid var(--cs-color-focus); outline-offset: var(--cs-focus-offset); }

@media (max-width: 760px) {
    .cs-image-viewer__caption { width: 100%; }
}