/* A photo, video, GIF or PDF opened over the page (viewer.js), as the app's
   MediaPopup: a glass frame, the page dimmed and soft behind it. */

.mv { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 28px 72px; }
.mv-scrim {
  position: absolute; inset: 0; background: rgba(12, 14, 18, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.mv-card {
  position: relative; margin: 0; display: flex; flex-direction: column; gap: 8px;
  max-width: min(100%, 1180px); padding: 8px; border-radius: 28px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 24px 70px rgba(10, 12, 16, 0.35);
  touch-action: none; will-change: transform;
}
.mv-media { display: grid; place-items: center; min-width: 120px; min-height: 120px; cursor: grab; user-select: none; -webkit-user-select: none; }
.mv-media:active { cursor: grabbing; }
.mv-thing {
  display: block; max-width: 100%; max-height: calc(100vh - 56px - 58px); border-radius: 20px;
  background: var(--soft); -webkit-user-drag: none;
}
img.mv-thing { object-fit: contain; }
video.mv-thing { width: min(960px, 100%); background: #000; }
.mv-pdf { width: min(900px, calc(100vw - 160px)); height: calc(100vh - 56px - 58px); border: 0; background: #fff; }
.mv-wait { display: grid; place-items: center; width: min(520px, 70vw); aspect-ratio: 4 / 3; border-radius: 20px; background: var(--soft); color: var(--steel); font-size: 14px; }
.mv-wait i { width: 26px; height: 26px; border-radius: 999px; border: 2.5px solid var(--hair); border-top-color: var(--ink); animation: mv-turn 0.8s linear infinite; }
@keyframes mv-turn { to { transform: rotate(360deg); } }

.mv-bar { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 10px; min-height: 40px; color: var(--ink); }
.mv-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-count { flex: none; font-size: 13px; color: var(--steel); font-variant-numeric: tabular-nums; }
.mv-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 36px; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.mv-btn:hover { background: var(--hair); }
.mv-btn[hidden] { display: none; }
.mv-x { padding: 0; width: 36px; }
.mv-btn svg, .mv-side svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mv-side {
  position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center;
  border: 1px solid var(--glass-edge); border-radius: 999px; cursor: pointer; color: var(--ink);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow);
  transition: opacity 0.15s ease;
}
.mv-prev { left: 14px; }
.mv-next { right: 14px; }
.mv-side[disabled] { opacity: 0.3; cursor: default; }

@media (max-width: 760px) {
  .mv { padding: calc(14px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom)); }
  .mv-card { border-radius: 24px; }
  .mv-thing { border-radius: 17px; max-height: calc(100dvh - 120px); }
  .mv-pdf { width: calc(100vw - 36px); height: calc(100dvh - 130px); }
  .mv-side { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); margin-top: 0; width: 42px; height: 42px; }
}