.media-preview{position:fixed;z-index:90;outline:none;width:min(960px,calc(100vw - 24px));height:min(720px,calc(100dvh - 24px));min-width:min(280px,calc(100vw - 24px));min-height:min(220px,100dvh);max-width:100vw;max-height:100dvh;box-sizing:border-box;resize:both;overflow:hidden;background:var(--input-bg);color:var(--text);border:0;border-radius:0;box-shadow:0 12px 40px #0005}
.media-preview-stage,.media-preview-canvas{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media-preview-stage{touch-action:none}
.media-preview-canvas img{display:block;max-width:100%;max-height:100%;object-fit:contain;flex:none;user-select:none}
.media-preview-canvas video{display:block;width:100%;height:100%;object-fit:contain}
.media-preview button{position:absolute;z-index:1;min-height:36px;padding:0;border:0;color:var(--text);background:#111925b3;backdrop-filter:blur(6px);font-size:28px;line-height:1;cursor:pointer}
.media-preview [data-preview-prev],.media-preview [data-preview-next]{top:50%;transform:translateY(-50%);width:44px;height:56px;border-radius:7px;background:transparent;backdrop-filter:none;opacity:.7;text-shadow:none;transition:background-color .15s,opacity .15s}
.media-preview [data-preview-prev]{left:12px}.media-preview [data-preview-next]{right:12px}
.media-preview [data-preview-prev]:disabled,.media-preview [data-preview-next]:disabled{opacity:.18;cursor:default}
.media-preview [data-preview-prev] svg,.media-preview [data-preview-next] svg{display:block;width:22px;height:28px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px #0009);pointer-events:none}
.media-preview [data-preview-prev]:hover:not(:disabled),.media-preview [data-preview-next]:hover:not(:disabled){background:#11192566;opacity:1}
.media-preview button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.media-preview.is-image-zoomed .media-preview-stage{cursor:grab}
.media-preview.is-image-panning .media-preview-stage{cursor:grabbing}
.media-preview-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:2;opacity:0;transition:opacity .15s}
.media-preview-tools button{position:static;width:34px;border-radius:6px;font-size:24px}
.media-preview:hover .media-preview-tools,.media-preview:focus-within .media-preview-tools{opacity:1}
.media-preview [data-preview-count]{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:8px;background:#111925b3;font-size:11px;color:var(--text-secondary);pointer-events:none;opacity:0}
.media-preview:hover [data-preview-count],.media-preview:focus-within [data-preview-count]{opacity:1}
.media-preview:has(video) [data-preview-count]{bottom:54px}
.media-preview-error{padding:16px;color:var(--muted);font-size:13px}
.media-preview-standalone{margin:0;height:100dvh;overflow:hidden;background:var(--input-bg)}
.media-preview.is-standalone,.media-preview:fullscreen,.media-preview.is-maximized{inset:0;width:100%;height:100dvh;max-width:none;max-height:none;min-width:0;min-height:0;resize:none;border:0;border-radius:0;box-shadow:none}
.media-preview:fullscreen{width:100vw;height:100vh}
.media-preview-waiting{margin:24px;color:var(--muted)}
.media-preview [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.media-preview-tools,.media-preview [data-preview-prev],.media-preview [data-preview-next]{transition:none}}

.media-preview:fullscreen,.media-preview.is-maximized{left:0!important;top:0!important;width:100vw!important;height:100dvh!important}
.media-preview.is-mobile{inset:0!important;width:100vw!important;height:var(--hanabi-mobile-height,100dvh)!important;min-width:0;min-height:0;max-height:none;resize:none;box-shadow:none;z-index:120;background:var(--input-bg)}
.media-preview.is-mobile .media-preview-stage{inset:64px 0 max(44px,env(safe-area-inset-bottom));height:auto;touch-action:none}
.media-preview.is-mobile .media-preview-canvas img{transform-origin:center;will-change:transform;max-width:none;max-height:none}
.media-preview.is-mobile .media-preview-tools{opacity:1;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));gap:12px}
.media-preview.is-mobile .media-preview-tools button{min-width:44px;min-height:44px;width:auto;padding:8px;font-size:18px;background:var(--control-bg);backdrop-filter:none}
.media-preview.is-mobile [data-preview-prev],.media-preview.is-mobile [data-preview-next]{width:44px;height:52px}
.media-preview.is-mobile [data-preview-count]{opacity:1;bottom:max(12px,env(safe-area-inset-bottom));font-size:16px}
.media-preview.is-mobile:has(video) [data-preview-count]{bottom:max(12px,env(safe-area-inset-bottom))}