.media-preview{position:relative;display:block;width:100%;padding:0;border-radius:9px;overflow:hidden;line-height:0;cursor:zoom-in}.media-preview:focus-visible,.avatar-preview:focus-visible{outline:3px solid #af3528;outline-offset:3px}.media-expand{position:absolute;right:8px;bottom:8px;background:#17212abf;color:white;font-size:12px;line-height:1.5;padding:3px 9px;border-radius:6px;pointer-events:none}.avatar-preview{display:block;width:100%;height:100%;padding:0;cursor:zoom-in}.avatar-preview img{width:100%;height:100%;object-fit:cover}
dialog.media-viewer{width:calc(100vw - 32px);max-width:1280px;height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);background:#151917;color:#fff;border-radius:14px;overflow:hidden;padding:16px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:12px}dialog.media-viewer[open]{display:grid}dialog.media-viewer::backdrop{background:#000d}.media-viewer-head{min-width:0;max-width:100%;display:flex;align-items:center;gap:16px;justify-content:space-between}.media-viewer-head h2{flex:1;width:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.media-viewer-head button{flex-shrink:0}.media-viewer button{background:#343c37;color:white;border-radius:8px;padding:8px 12px;min-height:44px;line-height:1.3}.media-viewer-stage{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}.media-viewer-stage img,.media-viewer-stage video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;object-fit:contain}.media-viewer-stage video{width:100%;height:100%;background:#000}.media-viewer-stage.is-zoomed img{max-width:none;max-height:none;margin:0}.media-viewer-tools{min-width:0;max-width:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.media-viewer-count{font-size:13px;min-width:42px;text-align:center}.media-image-tools{display:flex;gap:8px}.media-image-tools[hidden]{display:none}.media-viewer-status{font-size:12px;color:#d4dcd6}
@media(max-width:600px){dialog.media-viewer{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));gap:10px}.media-viewer-head h2{font-size:14px}.media-viewer button{font-size:13px;padding:8px 10px}.media-expand{font-size:11px}.media-viewer-status{width:100%}}