.attachment-viewer{width:min(1240px,calc(100vw - 40px));height:min(900px,calc(100dvh - 40px));max-width:none;max-height:none;margin:auto;padding:0;border:1px solid #c8d8eb;border-radius:22px;background:#f7faff;color:#142c45;box-shadow:0 24px 100px #071d4b50;overflow:hidden}
.attachment-viewer[open]{display:flex;flex-direction:column}
.attachment-viewer-shell{display:flex;flex-direction:column;min-height:0;width:100%;height:100%}
.attachment-viewer::backdrop{background:#071a38b8;backdrop-filter:blur(4px)}
.attachment-viewer-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;background:#fff;border-bottom:1px solid #d9e5f2;flex-shrink:0}
.attachment-viewer-heading p{margin:0 0 3px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#1f64ce}
.attachment-viewer-heading h2{margin:0;font-size:21px;line-height:1.4;overflow-wrap:anywhere}
.attachment-viewer-heading .icon-btn{flex-shrink:0}
.attachment-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px 6px;flex-shrink:0;flex-wrap:wrap}
.attachment-viewer-toolbar [hidden]{display:none!important}
.attachment-viewer-toolbar .btn{white-space:nowrap;min-height:36px}
.attachment-viewer-toolbar .icon{width:17px;height:17px;flex-shrink:0}
.attachment-viewer-pages,.attachment-viewer-zoom,.attachment-viewer-actions{display:flex;align-items:center;gap:8px}
.attachment-viewer-pages span{font-size:13px;font-weight:700;min-width:44px;text-align:center}
.attachment-viewer-zoom button:first-child,.attachment-viewer-zoom button:last-child{font-size:20px;line-height:1;width:38px;padding:5px}
.attachment-viewer-zoom [data-attachment-scale]{font-size:12px;margin-left:4px;color:#45607c}
.attachment-viewer-actions{margin-left:auto}
.attachment-viewer-filename{margin:0;padding:4px 24px 10px;color:#516b87;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:0}
.attachment-viewer-stage{flex:1;min-height:0;overflow:auto;margin:0 20px;border:1px solid #d5e3f2;border-radius:14px;background:repeating-conic-gradient(#eef4fb 0 25%,#f8fbff 0 50%) 50%/24px 24px;overscroll-behavior:contain}
.attachment-viewer-stage:focus-visible{outline:3px solid #2b77dc;outline-offset:2px}
.attachment-viewer-canvas{display:grid;place-items:center;width:max-content;height:max-content;min-width:100%;min-height:100%;padding:20px;box-sizing:border-box}
.attachment-viewer-canvas img{display:block;max-width:none;max-height:none;object-fit:contain;box-shadow:0 8px 35px #132d531c;background:#fff;user-select:none}
.attachment-viewer-file{display:flex;min-height:100%;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:32px;text-align:center;overflow-wrap:anywhere}
.attachment-viewer-file .icon{width:54px;height:54px;color:#3676d0}
.attachment-viewer-file span{font-size:14px;color:#516b87}
.attachment-viewer-status{min-height:20px;margin:0;padding:10px 24px 14px;font-size:13px;line-height:1.5;color:#355a7b;flex-shrink:0;overflow-wrap:anywhere}
.attachment-viewer-shell:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0;background:#f7faff}
@media(max-width:640px){.attachment-viewer{width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:15px}.attachment-viewer-heading{padding:13px 15px}.attachment-viewer-heading h2{font-size:18px}.attachment-viewer-toolbar{padding:10px 12px 6px;gap:8px}.attachment-viewer-toolbar .btn{font-size:12px;padding-left:10px;padding-right:10px}.attachment-viewer-stage{margin:0 10px}.attachment-viewer-filename{padding-left:14px;padding-right:14px}.attachment-viewer-status{padding:9px 14px 11px}.attachment-viewer-pages,.attachment-viewer-zoom,.attachment-viewer-actions{gap:5px}.attachment-viewer-actions{margin-left:0}.attachment-viewer-zoom button:first-child,.attachment-viewer-zoom button:last-child{width:32px}.attachment-viewer-canvas{padding:12px}}

.attachment-viewer-image-info{padding:0 24px 10px;color:#516b87;font-size:12px;line-height:1.5;flex-shrink:0}.attachment-viewer-image-info[hidden],.attachment-viewer-small-original[hidden]{display:none!important}.attachment-viewer-image-info p{margin:0;overflow-wrap:anywhere}.attachment-viewer-image-info p:first-child{display:flex;flex-wrap:wrap;gap:4px 14px}.attachment-viewer-image-info strong{color:#244f83;white-space:nowrap}.attachment-viewer-small-original{margin-top:6px!important;border-radius:8px;padding:7px 10px;background:#eaf2ff;color:#365b85}@media(max-width:640px){.attachment-viewer-image-info{padding:0 14px 9px;font-size:11px}}