/* The overlay lives inside the native dialog's top layer. */
.image-dialog[data-viewer-managed] { background:transparent!important; isolation:isolate; }
.viewer-surface { position:absolute; inset:0; background:var(--paper,#fff); pointer-events:none; z-index:-1; }
.viewer-image-stage { width:100%; height:calc(100% - 45px); display:flex; align-items:center; justify-content:center; }
.viewer-image-frame { width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center; }
.viewer-image-frame[data-cropped] { overflow:hidden; }
.viewer-image-frame>#lightbox-image { display:block; width:100%; height:100%; object-fit:contain; max-width:none; max-height:none; }
.viewer-motion-ghost { position:fixed; z-index:5; pointer-events:none; overflow:hidden; background:transparent; }
.viewer-motion-ghost>img { display:block; position:absolute; max-width:none; max-height:none; object-fit:fill; }
[data-viewer-motion-hidden] { visibility:hidden!important; transition:none!important; }
.image-dialog[data-viewer-phase="opening"]::backdrop { animation:viewer-backdrop-in 340ms ease both; }
.image-dialog[data-viewer-phase="closing"]::backdrop { animation:viewer-backdrop-out 320ms ease both; }
.image-dialog[data-viewer-phase="opening"]>:is(button,p,.lightbox-controls) { animation:viewer-controls-in 300ms ease both; }
.image-dialog[data-viewer-phase="closing"]>:is(button,p,.lightbox-controls) { animation:viewer-controls-out 220ms ease both; }
@keyframes viewer-backdrop-in { from {opacity:var(--viewer-backdrop-start,0)} to {opacity:1} }
@keyframes viewer-backdrop-out { from {opacity:1} to {opacity:0} }
@keyframes viewer-controls-in { from {opacity:0} to {opacity:1} }
@keyframes viewer-controls-out { from {opacity:1} to {opacity:0} }
@media(prefers-reduced-motion:reduce) { .image-dialog[data-viewer-managed]::backdrop, .image-dialog[data-viewer-managed]>:is(button,p,.lightbox-controls) { animation:none; } }