/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--lightbox-z-index);
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

/* 灯箱背景遮罩 */
.lightbox-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--lightbox-overlay-bg);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-default);
}

.lightbox.active .lightbox-overlay {
  opacity: 1;
}

/* 灯箱内容容器 */
.lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* 图片容器 */
.lightbox-image-container {
  position: relative;
  max-width: var(--lightbox-max-width);
  max-height: var(--lightbox-max-height);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none; /* 禁用默认触摸行为 */
}

/* 主图片 */
.lightbox-image {
  max-width: 100%;
  max-height: var(--lightbox-max-height);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--duration-normal) var(--easing-default),
              transform var(--duration-normal) var(--easing-default);
  will-change: transform, opacity;
}

.lightbox-image.loaded {
  opacity: 1;
  transform: scale(1);
}

/* 图片缩放状态 */
.lightbox-image.zoomed {
  cursor: grab;
  max-width: none;
  max-height: none;
}

.lightbox-image.zoomed:active {
  cursor: grabbing;
}

/* PC端切换按钮 */
.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: var(--border-radius-round);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) var(--easing-default);
  z-index: 2;
}

.lightbox-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.lightbox-btn:active {
  background-color: rgba(255, 255, 255, 0.4);
}

.lightbox-prev {
  left: var(--spacing-lg);
}

.lightbox-next {
  right: var(--spacing-lg);
}

.lightbox-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* PC端关闭按钮 */
.lightbox-close {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: var(--border-radius-round);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) var(--easing-default);
  z-index: 2;
}

.lightbox-close:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 图片信息 */
.lightbox-info {
  position: absolute;
  bottom: calc(var(--spacing-lg) * 2);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  max-width: 80%;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-default);
  z-index: 2;
}

.lightbox-info.visible {
  opacity: 1;
}

.lightbox-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
}

.lightbox-meta {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.lightbox-meta span:not(:last-child)::after {
  content: '·';
  margin-left: var(--spacing-md);
}

/* 移动端隐藏PC按钮 */
@media (max-width: 768px) {
  .lightbox-btn,
  .lightbox-close {
    display: none;
  }

  .lightbox-image-container {
    max-height: calc(100vh - var(--mobile-nav-height) - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
  }

  .lightbox-info {
    bottom: calc(var(--mobile-nav-height) + var(--spacing-lg));
  }
}

/* 触摸设备隐藏PC按钮 */
@media (hover: none) and (pointer: coarse) {
  .lightbox-btn,
  .lightbox-close {
    display: none;
  }
}