/* Explicit margins survive the global reset; the native top layer stays viewport-centered. */
dialog.case-preview-dialog{position:fixed;inset:0;margin:auto;height:fit-content}
/* Video previews hug the decoded frame instead of a fixed-width black card. */
dialog.case-preview-dialog:has(video){width:fit-content;max-width:calc(100vw - 48px);padding:0;border:0;border-radius:16px;background:transparent;box-shadow:none;overflow:visible}
dialog.case-preview-dialog:has(video) .case-preview-dialog-body{width:fit-content;min-height:0;background:transparent}
dialog.case-preview-dialog .case-preview-dialog-body>video{width:min(calc(200vw / 3),calc((100dvh - 80px) * var(--preview-video-ratio,1.777778)));height:auto;max-width:calc(100vw - 48px);max-height:calc(100dvh - 80px);object-fit:contain;border-radius:16px}
/* Shrink only the visible circle by one third; retain the hit area and original cross. */
dialog.case-preview-dialog:has(video) .case-preview-close{top:-20px;right:-20px;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:transparent!important;color:#000;mix-blend-mode:normal;box-shadow:none;transform:scale(1);transition:transform 160ms cubic-bezier(.2,.8,.2,1)}
dialog.case-preview-dialog:has(video) .case-preview-close::before{content:"";position:absolute;inset:0;margin:auto;width:calc(80px / 3);height:calc(80px / 3);border-radius:50%;background:#fff;pointer-events:none}
dialog.case-preview-dialog:has(video) .case-preview-close svg{position:relative;width:18px;height:18px}
@media(hover:hover) and (pointer:fine){dialog.case-preview-dialog:has(video) .case-preview-close:hover:not(:disabled){transform:scale(1.08)}}
dialog.case-preview-dialog:has(video) .case-preview-close:active:not(:disabled){transform:scale(.92)}
dialog.case-preview-dialog:has(video) .case-preview-close:focus-visible{outline:2px solid #000;outline-offset:3px}
@media(prefers-reduced-motion:reduce){dialog.case-preview-dialog:has(video) .case-preview-close{transition:none}dialog.case-preview-dialog:has(video) .case-preview-close:is(:hover,:active){transform:none}}
/* Mention previews: only the original image and a close glyph, no card chrome. */
dialog.media-image-only{position:fixed;inset:0;box-sizing:border-box;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
dialog.media-image-only[open]{display:grid;place-items:center}
dialog.media-image-only::backdrop{background:rgba(17,18,17,.65)}
.media-image-only-content{position:relative;display:grid;place-items:center;width:fit-content;height:fit-content;max-width:100%;max-height:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.media-image-only-content>img{display:block;width:auto;height:auto;max-width:min(80vw,1200px);max-height:78dvh;object-fit:contain;border:0;border-radius:0;background:transparent}
dialog.media-image-only .media-image-only-close{position:absolute;top:0;right:0;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;mix-blend-mode:difference;box-shadow:none;opacity:.75;transform:none;transition:transform .15s,opacity .15s}
.media-image-only-close svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media(hover:hover) and (pointer:fine){dialog.media-image-only .media-image-only-close:hover:not(:disabled){background:transparent;color:#fff;opacity:1;transform:scale(1.1)}}
dialog.media-image-only .media-image-only-close:active:not(:disabled){background:transparent;color:#fff;opacity:1;transform:scale(.9)}
dialog.media-image-only .media-image-only-close:focus-visible{outline:2px solid currentColor;outline-offset:-4px;opacity:1}
@media(prefers-reduced-motion:reduce){dialog.media-image-only .media-image-only-close{transition:none}dialog.media-image-only .media-image-only-close:is(:hover,:active):not(:disabled){transform:none}}