.image-preview-dialog{box-sizing:border-box;width:min(1100px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.image-preview-dialog::backdrop{background:#071626c9}
.image-preview-dialog>header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.image-preview-dialog>header>strong{min-width:0;overflow-wrap:anywhere;font-size:15px;flex:1}
.image-preview-dialog>header>button{flex:none;width:44px;height:44px;min-height:44px;margin:0;padding:0;font-size:26px}
.image-preview-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.image-preview-tools button{min-width:44px;min-height:44px;padding:6px 10px;margin:0;font-size:18px}
.image-preview-zoom>button:last-child{font-size:13px}
.image-preview-counter,.image-preview-percent{min-width:48px;text-align:center;font-size:13px;white-space:nowrap}
.image-preview-body{overflow:auto;height:max(80px,min(60dvh,calc(100dvh - 240px)));min-height:0;overscroll-behavior:contain;touch-action:none;border-radius:8px;background:var(--surface-raised)}
.image-preview-canvas{display:grid;place-items:center;min-width:100%;min-height:100%}
.image-preview-canvas>img{display:block;max-width:none;max-height:none;object-fit:contain;user-select:none}
.image-preview-canvas>[hidden]{display:none}
.image-preview-canvas>p{max-width:280px;padding:12px;text-align:center;overflow-wrap:anywhere}
.image-preview-body.is-zoomed{cursor:grab}
.image-preview-body.is-zoomed:active{cursor:grabbing}
.image-preview-dialog>footer{display:flex;justify-content:flex-end;margin-top:10px}
.image-preview-dialog>footer>a{min-height:44px;white-space:normal}
@media(max-width:580px){.image-preview-dialog{padding:10px}.image-preview-dialog>footer>a{width:100%;justify-content:center}.image-preview-tools{gap:4px}.image-preview-body{height:max(80px,min(55dvh,calc(100dvh - 280px)))}}

.image-preview-navigation,.image-preview-zoom{display:flex;align-items:center;justify-content:center;gap:6px}
@media(max-width:580px){.image-preview-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}.image-preview-navigation,.image-preview-zoom{gap:4px}.image-preview-zoom>button:last-child{flex-basis:auto}}