/* The media viewer (client/js/mediaViewer.js). Always dark, whatever the theme, like Discord's. */
.lightbox.media-viewer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lightbox.media-viewer[open] { display: flex; flex-direction: column; }
.lightbox.media-viewer::backdrop { background: rgba(0, 0, 0, 0.88); }

.mv-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 56px; }
.mv-who { display: flex; flex-direction: column; min-width: 0; }
.mv-author { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-who .mv-time { color: rgba(255, 255, 255, 0.7); font-size: 12.5px; }
.mv-top-actions { display: flex; align-items: center; gap: 12px; }
.mv-counter { color: rgba(255, 255, 255, 0.8); font-size: 14px; font-variant-numeric: tabular-nums; }

.mv-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mv-media { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.lightbox.media-viewer .mv-media img { display: block; max-width: calc(100vw - 160px); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); border-radius: 4px; transform-origin: center center; cursor: zoom-in; user-select: none; -webkit-user-drag: none; touch-action: none; transition: transform 0.15s ease-out; }
.lightbox.media-viewer .mv-media img.zoomed { cursor: grab; border-radius: 0; }
.lightbox.media-viewer.mv-dragging .mv-media img { cursor: grabbing; transition: none; }
.lightbox.media-viewer .mv-media video { display: block; max-width: calc(100vw - 160px); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); border-radius: 4px; background: #000; }

.mv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; z-index: 1; }
.mv-nav:hover { background: rgba(0, 0, 0, 0.8); }
.mv-prev { left: 16px; }
.mv-next { right: 16px; }
.lightbox.media-viewer.mv-zoomed .mv-nav { opacity: 0.35; }
.lightbox.media-viewer.mv-zoomed .mv-nav:hover, .lightbox.media-viewer .mv-nav:focus-visible { opacity: 1; }

.lightbox-bar.mv-bar { flex: none; padding: 8px 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.lightbox.media-viewer .lightbox-alt { margin: 0 auto; max-width: min(720px, 100%); color: #fff; text-align: center; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; } /* an attachment's description (alt text) */
.mv-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mv-file { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mv-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lightbox.media-viewer .mv-size { color: rgba(255, 255, 255, 0.7); font-size: 13px; flex: none; }
.mv-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.lightbox.media-viewer .mv-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 4px; background: none; color: rgba(255, 255, 255, 0.85); font-size: 14px; text-decoration: none; }
.lightbox.media-viewer .mv-button:hover, .lightbox.media-viewer .mv-button:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; }
.lightbox.media-viewer button:focus-visible, .lightbox.media-viewer a:focus-visible { outline: 2px solid #8ea1ff; outline-offset: 1px; }
.lightbox.media-viewer .mv-close { padding: 6px; }

@media (max-width: 600px) {
  .mv-actions .mv-button span { display: none; }
  .lightbox.media-viewer .mv-media img, .lightbox.media-viewer .mv-media video { max-width: calc(100vw - 24px); }
}