/* ═══════════════════════════════════════════════════
   Miuix Lightbox — Window overlay photo preview
   Uses Miuix surface, toolbar, icon button, and dialog motion rules.
   ═══════════════════════════════════════════════════ */

.lightbox {
  position: fixed;
  inset: 0;
  height: var(--lb-viewport-h, 100vh);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 76px) 16px calc(var(--safe-bottom) + 96px);
  background: var(--mi-window-dimming);
  backdrop-filter: var(--mi-window-backdrop-filter);
  -webkit-backdrop-filter: var(--mi-window-backdrop-filter);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mi-duration-dialog-dim-in) var(--ease-out), backdrop-filter var(--mi-duration-dialog-dim-in) var(--ease-out);
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox.closing {
  pointer-events: none;
}

/* ── Floating title toolbar ── */
.lb-header {
  position: absolute;
  top: calc(12px + var(--safe-top));
  left: max(16px, calc((100vw - var(--content-max)) / 2 + 18px));
  right: max(16px, calc((100vw - var(--content-max)) / 2 + 18px));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px;
  border-radius: var(--r-full);
  background: var(--mi-background);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(-12px);
  opacity: 0;
  transition: opacity var(--mi-duration-dialog) var(--ease-out), transform var(--mi-duration-dialog) var(--ease-spring);
}

.lightbox.open .lb-header {
  opacity: 1;
  transform: translateY(0);
}

.lightbox.closing .lb-header {
  opacity: 0;
  transform: translateY(-12px) scale(var(--mi-sink-scale));
  transition-duration: var(--mi-duration-dialog-reset);
}

.lb-title {
  min-width: 0;
  min-height: var(--searchbar-input-h);
  max-width: min(520px, calc(100vw - 88px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  color: var(--mi-on-surface-container);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--mi-duration-press-out) var(--ease), transform var(--mi-duration-press-out) var(--ease-spring);
}

.lb-title:active {
  transform: scale(var(--mi-sink-scale));
  background: var(--mi-surface-container);
}

.lb-header .lb-idx {
  flex-shrink: 0;
  font-size: var(--fs-footnote1);
  color: var(--mi-on-surface-summary);
  font-weight: var(--fw-normal);
  font-variant-numeric: tabular-nums;
}

.lb-header .lb-fname {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1.22;
}

.lb-header .lb-fname.single-line {
  justify-content: center;
}

.lb-header .lb-location,
.lb-header .lb-time {
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-header .lb-location {
  font-size: var(--fs-body2);
  color: var(--mi-on-surface-container);
  font-weight: var(--fw-medium);
}

.lb-header .lb-time {
  font-size: var(--fs-footnote1);
  color: var(--mi-on-surface-summary);
}

/* ── Preview surface ── */
.lb-stage {
  position: relative;
  display: grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 1120px);
  max-height: 100%;
  border-radius: var(--r-xl);
  background: var(--mi-background);
  box-shadow: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--mi-duration-popup-in) var(--ease-out);
  will-change: opacity;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.lb-stage:active {
  cursor: grabbing;
}

.lb-stage::before {
  content: '';
  position: absolute;
  width: var(--nav-rail-icon);
  height: var(--nav-rail-icon);
  border-radius: var(--r-full);
  border: 3px solid var(--mi-loading-track);
  border-top-color: var(--mi-primary);
  opacity: 0;
  transform: scale(var(--mi-badge-enter-scale));
  transition: opacity var(--mi-duration-popup-in) var(--ease-out), transform var(--mi-duration-popup-in) var(--ease-spring);
  animation: lbLoadingSpin var(--mi-duration-progress-circular) linear infinite;
}

.lb-stage.loading::before {
  opacity: 1;
  transform: scale(1);
}

.lb-stage.loading.previewing::before {
  opacity: 0;
}

.lb-stage.slow-loading::after {
  content: '加载中…';
  position: absolute;
  top: calc(50% + 26px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--mi-on-surface-summary);
  font-size: var(--fs-footnote1);
  opacity: .85;
}

.lb-live-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: var(--live-badge-size);
  height: var(--live-badge-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mi-live-badge);
  filter: var(--mi-live-shadow);
  pointer-events: none;
  opacity: 0;
  transform: scale(var(--mi-media-enter-scale));
  transition: opacity var(--mi-duration-popup-in) var(--ease-out), transform var(--mi-duration-press-out) var(--ease-spring);
}

.lb-live-badge.show {
  opacity: 1;
  transform: scale(1);
}

.lb-live-badge svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

.lightbox.open .lb-stage {
  opacity: 1;
}

.lightbox.open .lb-stage.morph-pending {
  opacity: 0;
}

.lightbox.open .lb-stage.morph-pending.previewing {
  opacity: 1;
}

.lightbox.open .lb-stage.fade-out,
.lightbox.closing .lb-stage {
  opacity: 0;
}

.lightbox.open .lb-stage.morph-ready {
  animation: lbMorphOpen var(--mi-duration-sheet) var(--ease-spring) both;
}

.lb-stage.slide-left {
  animation: lbStageSlideFromRight var(--mi-duration-nav) var(--ease-spring) both;
}

.lb-stage.slide-right {
  animation: lbStageSlideFromLeft var(--mi-duration-nav) var(--ease-spring) both;
}

.lightbox .lb-img,
.lightbox .lb-video {
  display: block;
  max-width: calc(100vw - 28px);
  max-height: calc(var(--lb-viewport-h, 100vh) - var(--safe-top) - var(--safe-bottom) - 170px);
  width: var(--lb-media-w, auto);
  height: var(--lb-media-h, auto);
  object-fit: contain;
  border-radius: var(--r-xl);
  opacity: 1;
  transition: opacity var(--mi-duration-popup-in) var(--ease-out);
  -webkit-user-drag: none;
  user-select: none;
}

.lightbox .lb-img,
.lightbox .lb-video {
  grid-area: 1 / 1;
}

.lightbox .lb-full-img {
  display: block;
  opacity: 0;
  position: relative;
  z-index: 2;
}

.lightbox .lb-full-img.ready {
  display: block;
  opacity: 1;
}

.lightbox .lb-preview-img {
  position: relative;
  z-index: 1;
}

.lightbox .lb-preview-img.covered {
  opacity: 1;
}

.lightbox .lb-img.load-failed {
  display: none;
}

.lb-stage.loading.previewing .lb-preview-img {
  opacity: 1;
}

.lb-stage.previewing .lb-preview-img {
  filter: blur(1.5px) saturate(.99);
  transform: translateZ(0) scale(1.012);
  transform-origin: center;
}

.lb-stage.exit-left {
  animation: lbStageExitToLeft var(--mi-duration-popup-out) var(--ease-out) both;
}

.lb-stage.exit-right {
  animation: lbStageExitToRight var(--mi-duration-popup-out) var(--ease-out) both;
}

.lightbox .lb-img.hidden {
  display: none;
}

.lightbox .lb-video {
  display: none;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.lightbox .lb-video.show {
  display: block;
}

.lightbox .lb-video::-webkit-media-controls,
.lightbox .lb-video::-webkit-media-controls-panel,
.lightbox .lb-video::-webkit-media-controls-overlay-play-button,
.lightbox .lb-video::-webkit-media-controls-enclosure {
  display: none !important;
}

.lightbox .lb-video::-internal-media-controls-overlay {
  display: none !important;
}

/* ── Video play feedback ── */
.lb-play-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lb-play-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--r-full);
  background: var(--mi-background);
  color: var(--mi-on-surface-container);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(var(--mi-badge-enter-scale));
  transition: opacity var(--mi-duration-popup-in) var(--ease-out), transform var(--mi-duration-popup-in) var(--ease-spring);
}

.lb-play-icon svg {
  width: 42px;
  height: 42px;
  fill: currentColor;
}

.lb-play-icon.show {
  opacity: 1;
  transform: scale(1);
}

/* ── Icon buttons ── */
.lb-btn-close,
.lb-nav,
.lb-bottom button {
  width: 45px;
  height: var(--searchbar-input-h);
  border-radius: var(--r-full);
  color: var(--mi-on-secondary-variant);
  background: var(--mi-background);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mi-duration-press-out) var(--ease), opacity var(--mi-duration-press-out) var(--ease-out), transform var(--mi-duration-press-out) var(--ease-spring);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lb-caption {
  position: absolute;
  left: max(16px, calc((100vw - min(720px, 100vw)) / 2 + 16px));
  right: max(16px, calc((100vw - min(720px, 100vw)) / 2 + 16px));
  bottom: calc(80px + var(--safe-bottom));
  z-index: 5;
  max-height: min(28vh, 190px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--mi-background);
  color: var(--mi-on-surface);
  font-size: var(--fs-body2);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--shadow-float);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(var(--mi-media-enter-scale));
  transform-origin: center bottom;
  transition: opacity var(--mi-duration-nav) var(--ease-out), transform var(--mi-duration-nav) var(--ease-spring);
}

.lb-caption-text {
  min-width: 0;
  max-height: calc(min(28vh, 190px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: none;
}

.lb-caption-text.empty {
  color: var(--mi-on-surface-summary);
}

.lb-caption-text::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.lb-caption-edit {
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--mi-on-surface);
  background: transparent;
  transition: background var(--mi-duration-press-out) var(--ease), transform var(--mi-duration-press-out) var(--ease-spring);
}

.lb-caption-edit svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lb-caption-edit:active {
  background: var(--mi-state-hover);
  transform: scale(var(--mi-sink-scale));
}

.lb-bottom button.active {
  color: var(--mi-primary);
  background: var(--mi-active-tertiary-bg);
}

.lb-bottom button.active:active {
  background: var(--mi-active-tertiary-pressed);
}

.lb-bottom button.disabled,
.lb-bottom button:disabled,
.lb-caption-edit.disabled,
.lb-caption-edit:disabled {
  opacity: .36;
  pointer-events: auto;
}

.lb-caption-edit[hidden] {
  display: none;
}

.lb-caption {
  scrollbar-width: none;
}

.lb-caption::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.lb-caption.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.lb-caption.show.pressing {
  z-index: 6;
  transform: translateY(58px) scale(var(--mi-sink-scale));
}

.lb-btn-close svg,
.lb-nav svg,
.lb-bottom button svg {
  width: var(--selection-mark-size);
  height: var(--selection-mark-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#lb-featured .lb-featured-mark {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linejoin: round;
}

#lb-featured.active .lb-featured-mark {
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linejoin: round;
}

.lb-btn-close:active,
.lb-nav:active,
.lb-bottom button:active {
  background: var(--mi-secondary-variant);
  transform: scale(var(--mi-sink-scale));
}

.lb-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
}

.lb-nav:active {
  transform: translateY(-50%) scale(var(--mi-sink-scale));
}

.lb-prev { left: 14px; }
.lb-next { right: 14px; }

.lb-nav.hidden {
  opacity: 0;
  pointer-events: none;
}

.lb-bottom {
  position: absolute;
  bottom: calc(22px + var(--safe-bottom));
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}

.lb-bottom button {
  pointer-events: none;
  transform: translateY(14px);
  opacity: 0;
}

.lightbox.open .lb-bottom button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lightbox.open .lb-bottom button.disabled,
.lightbox.open .lb-bottom button:disabled {
  opacity: .36;
  pointer-events: auto;
}

.lightbox.closing .lb-bottom button,
.lightbox:not(.open) .lb-bottom button {
  pointer-events: none;
}

.lightbox.closing .lb-caption,
.lightbox:not(.open) .lb-caption {
  opacity: 0;
  transform: translateY(14px) scale(var(--mi-media-enter-scale));
  pointer-events: none;
  transition-duration: var(--mi-duration-dialog-reset);
}

.lightbox.closing .lb-bottom button {
  opacity: 0;
  transform: translateY(14px) scale(var(--mi-media-enter-scale));
  transition-duration: var(--mi-duration-dialog-reset);
}

.lightbox.open .lb-bottom button:active {
  transform: scale(var(--mi-sink-scale));
}

.lightbox.open .lb-bottom button.disabled:active,
.lightbox.open .lb-bottom button:disabled:active {
  background: transparent;
  transform: translateY(0);
}

/* ── Desktop lightbox ── */
@media (min-width: 768px) {
  .lightbox {
    padding: calc(var(--safe-top) + 76px) 28px calc(var(--safe-bottom) + 78px);
  }

  .lightbox .lb-img,
  .lightbox .lb-video {
    max-width: min(84vw, 1120px);
    max-height: calc(var(--lb-viewport-h, 100vh) - var(--safe-top) - var(--safe-bottom) - 166px);
  }

  .lb-btn-close,
  .lb-nav,
  .lb-bottom button {
    width: 48px;
    height: 48px;
  }

  .lb-prev { left: 28px; }
  .lb-next { right: 28px; }

  .lb-caption {
    left: calc((100vw - min(640px, calc(100vw - 56px))) / 2);
    right: calc((100vw - min(640px, calc(100vw - 56px))) / 2);
    width: auto;
  }

}

@media (max-width: 767px) {
  .lb-nav {
    display: none;
  }

  .lb-header {
    left: 16px;
    right: 16px;
  }

  .lb-title {
    max-width: calc(100vw - 92px);
  }
}

@keyframes lbMorphOpen {
  from {
    opacity: .86;
    border-radius: var(--r-md);
    transform: translate(var(--lb-morph-x, 0), var(--lb-morph-y, 0)) scale(var(--lb-morph-sx, .2), var(--lb-morph-sy, .2));
  }
  to {
    opacity: 1;
    border-radius: var(--r-xl);
    transform: translate(0, 0) scale(1, 1);
  }
}

@keyframes lbStageSlideFromRight {
  from {
    opacity: 0;
    transform: translateX(46px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lbStageSlideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-46px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lbStageExitToLeft {
  to {
    opacity: 0;
    transform: translateX(-34px);
  }
}

@keyframes lbStageExitToRight {
  to {
    opacity: 0;
    transform: translateX(34px);
  }
}

@keyframes lbLoadingSpin {
  to { transform: rotate(360deg); }
}