/* 手机大图按可用屏幕等比显示；控件覆盖在照片上，不挤占画面。 */
body.photo-viewer-open { position: fixed; width: 100%; overflow: hidden; }
.lightbox { overscroll-behavior: none; }
.lightbox-close, .lightbox-fullscreen {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 0; border-radius: 999px; background: rgba(0, 0, 0, .45);
  color: #fff; cursor: pointer; touch-action: manipulation;
}
.lightbox-close { right: max(12px, env(safe-area-inset-right)); line-height: 1; }
.lightbox-fullscreen {
  position: absolute; left: max(12px, env(safe-area-inset-left));
  top: calc(14px + env(safe-area-inset-top)); z-index: 120;
  font: inherit; font-size: 14px;
}
.lightbox-counter {
  position: absolute; top: calc(26px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 110; color: #fff;
  font: 14px/1.4 system-ui, sans-serif; text-shadow: 0 1px 4px #000;
  pointer-events: none;
}
.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox:focus { outline: none; }
.lightbox-body > img { -webkit-user-drag: none; user-select: none; }
.lightbox-body { background-position: center; background-size: contain; background-repeat: no-repeat; }
.lightbox-body.photo-loading > img { opacity: 0; }
.lightbox-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 105; max-width: calc(100% - 32px); padding: 12px 16px;
  border-radius: 12px; background: rgba(0, 0, 0, .78); color: #fff;
  text-align: center; font: 14px/1.5 system-ui, sans-serif;
}
.lightbox-status p { margin: 0; }
.lightbox-retry {
  min-height: 44px; margin-top: 8px; padding: 8px 18px; border: 1px solid #fff;
  border-radius: 999px; background: transparent; color: #fff; font: inherit;
  cursor: pointer; touch-action: manipulation;
}
.lightbox.comments-open .lightbox-status { display: none; }
@media (min-width: 901px) and (pointer: fine) {
  .lightbox-body.photo-loading { width: 92vw; height: 90vh; }
}
.viewer-controls-hidden .lightbox-nav,
.viewer-controls-hidden .lightbox-like,
.viewer-controls-hidden .lightbox-comments,
.viewer-controls-hidden .lightbox-counter,
.viewer-controls-hidden .lightbox-fullscreen { visibility: hidden; pointer-events: none; }
.detail-photo-open { display: block; position: relative; cursor: zoom-in; }
.detail-photo-hint {
  position: absolute; right: 10px; bottom: 10px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: white; font: 13px/1.4 system-ui, sans-serif;
}

@media (max-width: 900px), (pointer: coarse) {
  .lightbox {
    width: 100%; height: 100vh; height: 100dvh;
    background: #000; padding: 0; overflow: hidden;
  }
  .lightbox-body {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; max-width: none; max-height: none;
    touch-action: pan-y pinch-zoom;
  }
  .lightbox-body > img, .lightbox-body > video {
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: contain; padding: 0; border: 0; border-radius: 0;
    box-shadow: none; background: transparent;
  }
  .lightbox-nav { opacity: .7; width: 44px; height: 44px; }
  .lightbox-like, .lightbox-comments {
    min-height: 44px; max-width: calc(50% - 16px); padding: 8px 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .6); overflow: hidden; white-space: nowrap;
  }
  .lightbox-like { left: max(8px, env(safe-area-inset-left)); }
  .lightbox-comments { right: max(8px, env(safe-area-inset-right)); }
  .lightbox-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    height: 75vh; height: 75dvh;
    padding: 4px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
  }
  .lightbox-panel-grip { display: block; height: 20px; touch-action: none; }
  .lightbox.comments-open { padding-right: 0; padding-bottom: 75vh; padding-bottom: 75dvh; }
  .lightbox.comments-open .lightbox-body,
  .lightbox.comments-open .lightbox-body > img,
  .lightbox.comments-open .lightbox-body > video { max-width: none; max-height: none; }
  .lightbox.comments-open .lightbox-nav { top: 12.5vh; top: 12.5dvh; }
  .lightbox.comments-open .lightbox-comments { right: max(8px, env(safe-area-inset-right)); }
  .lightbox.comments-open .lightbox-like,
  .lightbox.comments-open .lightbox-comments { bottom: calc(75dvh + 8px); }
}

.lightbox:fullscreen { background: #000; }
.lightbox:fullscreen .lightbox-body { width: 100%; height: 100%; max-width: none; max-height: none; }
.lightbox:fullscreen .lightbox-body.photo-loading { width: 100%; height: 100%; }
.lightbox:fullscreen .lightbox-body > img,
.lightbox:fullscreen .lightbox-body > video {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: contain; padding: 0; border-radius: 0; background: transparent;
}
@media (max-width: 260px) { .lightbox-counter { display: none; } }