/* Native horizontal scrolling keeps touch swipes and browser pinch zoom intact. */
dialog.matmeg-media-dialog {
  position:fixed;
  inset:0;
  box-sizing:border-box;
  width:100%;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  color:#fff;
  background:#080808;
  box-shadow:none;
}
.matmeg-media-dialog::backdrop { background:#080808; }
.matmeg-media-track {
  display:flex;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
}
.matmeg-media-track::-webkit-scrollbar { display:none; }
.matmeg-media-slide {
  position:relative;
  display:flex;
  flex:0 0 100%;
  min-width:0;
  height:100%;
  align-items:center;
  justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.matmeg-media-slide .matmeg-media-asset {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  object-fit:contain;
  object-position:center;
}
.matmeg-media-slide video.matmeg-media-asset { padding-bottom:env(safe-area-inset-bottom, 0px); }
.matmeg-media-toolbar {
  position:absolute;
  inset:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:calc(10px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 22px calc(16px + env(safe-area-inset-left, 0px));
  background:linear-gradient(#0009, #0000);
  pointer-events:none;
}
.matmeg-media-count {
  color:#fff;
  font:600 .875rem/1.3 system-ui, sans-serif;
  text-shadow:0 1px 6px #000;
  font-variant-numeric:tabular-nums;
}
.matmeg-media-dialog .matmeg-media-control {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  margin:0;
  border:1px solid #ffffff40;
  border-radius:50%;
  color:#fff;
  background:#17171799;
  backdrop-filter:blur(10px);
  box-shadow:none;
  font:400 2rem/1 system-ui, sans-serif;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
.matmeg-media-dialog .matmeg-media-control:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.matmeg-media-dialog .matmeg-media-control:hover:not([aria-disabled='true']) { background:#313131d9; }
.matmeg-media-dialog .matmeg-media-control[aria-disabled='true'] { opacity:.25; cursor:default; }
.matmeg-media-dialog .matmeg-media-control[hidden] { display:none; }
.matmeg-media-previous,
.matmeg-media-next { position:absolute; top:50%; transform:translateY(-50%); }
.matmeg-media-previous { left:calc(12px + env(safe-area-inset-left, 0px)); }
.matmeg-media-next { right:calc(12px + env(safe-area-inset-right, 0px)); }
@media (hover:none) and (pointer:coarse) {
  /* Touch users swipe; screen readers and attached keyboards retain controls. */
  .matmeg-media-dialog .matmeg-media-previous:not(:focus-visible),
  .matmeg-media-dialog .matmeg-media-next:not(:focus-visible) {
    width:1px;
    min-width:1px;
    height:1px;
    min-height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
}
@media (prefers-reduced-motion:reduce) {
  .matmeg-media-track { scroll-behavior:auto; }
}

.matmeg-media-preview { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none; }
.matmeg-media-asset { position:relative; }
.matmeg-media-error { position:absolute;max-width:24rem;padding:14px 20px;border-radius:12px;background:#171315e8;color:#fff;text-align:center; }