.media-stage {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.stage-image,
.stage-video {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  object-fit: contain;
  object-position: center;
  flex: 0 1 auto;
}

.comments-visible .media-stage .stage-image,
.comments-visible .media-stage .stage-video {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* A small, unobtrusive affordance tells the presenter that the current
   image/video can be tapped to edit. It deliberately does not intercept
   taps: the media itself remains the edit target. */
.presenter-shell .media-stage:has(.editable-media)::after {
  content: "✎";
  position: absolute;
  z-index: 9;
  top: max(58px, calc(env(safe-area-inset-top) + 50px));
  right: max(12px, env(safe-area-inset-right));
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(18,18,18,.62);
  color: rgba(255,255,255,.92);
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 3px 14px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Once the edit toolbar is open the hint has done its job. */
.presenter-shell .media-stage:has(.media-edit-toolbar)::after {
  display: none;
}

@supports not (height: 100dvh) {
  .stage-image,
  .stage-video { max-height: 100vh !important; }
}

@media (max-width: 699px) {
  .comments-visible .media-stage { bottom: 76px !important; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .comments-visible .media-stage { bottom: 58px !important; }
  .presenter-shell .media-stage:has(.editable-media)::after {
    top: max(48px, calc(env(safe-area-inset-top) + 42px));
  }
}