/* Dedicated, responsive attachment viewer. Standard form dialogs retain their original dimensions. */
html.attachment-viewer-open { overflow:hidden; }
#modal.attachment-viewer { width:min(1600px,calc(100vw - 48px)); height:calc(100vh - 48px); height:calc(100dvh - 48px); max-width:none; max-height:calc(100dvh - 48px); padding:0; margin:auto; border:1px solid #e1e6ee; border-radius:17px; overflow:hidden; background:#fff; box-shadow:0 25px 100px #14203645; }
#modal.attachment-viewer::backdrop { background:#202c407d; backdrop-filter:blur(5px); }
#modal.attachment-viewer #modal-body { height:100%; display:flex; flex-direction:column; min-height:0; }
.viewer-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 24px; border-bottom:1px solid #e8ecf2; flex-shrink:0; }
.viewer-title-group { display:flex; gap:13px; align-items:center; min-width:0; flex:1; }
.viewer-header-icon { width:39px; height:39px; border-radius:11px; display:grid; place-items:center; color:#bd6372; background:#fff1f3; border:1px solid #f6e1e6; flex-shrink:0; }
.viewer-header-icon .icon { width:19px; height:19px; }
.viewer-titles { min-width:0; }
#modal.attachment-viewer h2 { margin:0 0 5px; font-size:18px; line-height:1.4; letter-spacing:-.3px; font-weight:650; color:#34445b; }
.viewer-file-name { font-size:12px; line-height:1.6; color:#68768a; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:0; }
#modal.attachment-viewer .viewer-close { display:grid; place-items:center; width:36px; height:36px; border:1px solid #e8ecf2; border-radius:9px; background:#f7f8fb; color:#758399; flex-shrink:0; font-size:25px; line-height:1; }
#modal.attachment-viewer .viewer-close:hover { color:#b44b60; background:#fff2f5; border-color:#efd6dd; }
.viewer-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:12px 24px; background:#fcfdfe; border-bottom:1px solid #e6ebf2; flex-shrink:0; }
.viewer-zoom-group,.viewer-tool-actions { display:flex; align-items:center; gap:8px; }
.viewer-tool-actions { flex-wrap:wrap; }
#modal.attachment-viewer .viewer-button { min-height:35px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:7px 12px; border:1px solid #dfe5ee; border-radius:8px; font-size:12px; color:#5a6b82; background:#fff; line-height:1.5; font-weight:500; white-space:nowrap; }
#modal.attachment-viewer .viewer-button:hover { background:#fff4f6; border-color:#e7bfca; color:#a34f63; }
#modal.attachment-viewer .viewer-button[aria-pressed=true] { background:#fff0f3; border-color:#ebc8d1; color:#ae5367; }
#modal.attachment-viewer .viewer-button:disabled { opacity:.4; cursor:default; }
#modal.attachment-viewer .viewer-zoom-button { width:35px; padding:4px; font-size:22px; font-weight:400; }
.viewer-button .icon { width:15px; height:15px; }
.viewer-percentage { min-width:55px; text-align:center; font-size:13px; font-weight:550; color:#52627a; font-variant-numeric:tabular-nums; }
.viewer-stage { flex:1 1 auto; min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain; scrollbar-color:#b7c2d3 #eef1f6; position:relative; background-color:#f2f4f8; background-image:linear-gradient(45deg,#e9edf366 25%,transparent 25%),linear-gradient(-45deg,#e9edf366 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9edf366 75%),linear-gradient(-45deg,transparent 75%,#e9edf366 75%); background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0; }
.viewer-stage.can-pan { cursor:grab; }
.viewer-stage.is-panning { cursor:grabbing; user-select:none; }
.viewer-image-wrap { min-width:100%; min-height:100%; display:flex; justify-content:center; align-items:center; }
#modal.attachment-viewer .attachment-preview-image { flex:none; display:block; width:auto; height:auto; max-width:none; max-height:none; object-fit:fill; border-radius:3px; background:#fff; box-shadow:0 5px 22px #26395116; }
.viewer-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; padding:11px 24px; border-top:1px solid #e6ebf2; background:#fff; flex-shrink:0; font-size:12px; line-height:1.6; color:#68768a; }
.viewer-footer span { display:inline-flex; align-items:center; gap:7px; }
.viewer-footer .icon { width:14px; height:14px; color:#92a0b4; }
@media(max-width:720px) {
 #modal.attachment-viewer { width:calc(100vw - 20px); height:calc(100dvh - 20px); max-height:calc(100dvh - 20px); border-radius:12px; }
 .viewer-header { padding:15px; gap:11px; }
 .viewer-title-group { gap:10px; }
 .viewer-header-icon { width:33px; height:33px; border-radius:9px; }
 #modal.attachment-viewer h2 { font-size:16px; }
 .viewer-file-name { font-size:11px; }
 .viewer-toolbar { padding:11px 14px; gap:10px; }
 .viewer-tool-actions { gap:6px; }
 #modal.attachment-viewer .viewer-button { padding:7px 9px; font-size:11px; }
 #modal.attachment-viewer .viewer-zoom-button { padding:4px; }
 .viewer-footer { padding:10px 15px; font-size:11px; gap:4px 12px; }
 .viewer-footer .viewer-keyboard-hint { display:none; }
}
@media(max-width:470px) {
 .viewer-toolbar { align-items:flex-start; flex-direction:column; }
 .viewer-tool-actions { width:100%; }
 .viewer-download { margin-left:auto; }
 .viewer-download .viewer-button-text { display:none; }
 .viewer-footer { flex-direction:column; align-items:flex-start; }
}
@media print { #modal.attachment-viewer { box-shadow:none; } }

.viewer-navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 24px; border-bottom:1px solid #e8ecf2; background:#fff; flex-shrink:0; }
.viewer-navigation[hidden],.viewer-status[hidden] { display:none; }
#viewer-counter { color:#64758a; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.viewer-status { position:absolute; inset:0; margin:0; padding:24px; display:flex; align-items:center; justify-content:center; text-align:center; color:#64758a; background:#f5f7fa; font-size:14px; }
@media(max-width:720px) { .viewer-navigation { padding:9px 14px; } }