/* ==========================================================================
   ImageViewer 图片点击放大预览组件 - 样式层
   --------------------------------------------------------------------------
   · 所有选择器统一使用 iv- 前缀并挂在 .iv-overlay / body.iv-lock 下，
     不与页面其他样式产生命名冲突。
   · 仅 body.iv-lock 一条作用于全局，用于预览时锁定页面滚动。
   · 逻辑与结构全部在 image-viewer.js 中生成，本文件只负责外观与动画。
   ========================================================================== */

/* ---------- 页面滚动锁（预览开启时由 JS 添加 / 关闭时移除） ---------- */
body.iv-lock {
  overflow: hidden;
}

/* ---------- 全屏遮罩层 ---------- */
.iv-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.86);
  opacity: 0;
  visibility: hidden;
  /* 关闭时：先淡出透明度，再延迟切换 visibility，避免动画被吃掉 */
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  touch-action: none;          /* 屏蔽遮罩层内的浏览器手势（滚动 / 双指缩放页面） */
  overscroll-behavior: contain; /* 阻止滚动穿透到 body */
  -webkit-user-select: none;
  user-select: none;
}

.iv-overlay.iv-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease;
}

/* ---------- 图片舞台：铺满遮罩，负责接收拖拽 / 滚轮 / 触摸事件 ---------- */
.iv-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}

.iv-stage.iv-dragging {
  cursor: grabbing;
}

/* ---------- 预览图片：等比例自适应，永不裁剪、不变形 ---------- */
.iv-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;             /* 留出安全边距，避免贴边 */
  max-height: 86vh;
  object-fit: contain;
  transform-origin: center center;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.28s ease;
  opacity: 0;
  pointer-events: auto;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.iv-overlay.iv-open .iv-img {
  opacity: 1;
}

/* 拖拽 / 捏合过程中关闭过渡，保证跟手无延迟 */
.iv-img.iv-instant {
  transition: none;
}

/* ---------- 关闭按钮 ---------- */
.iv-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px) + 12px);
  right: max(16px, env(safe-area-inset-right, 0px) + 12px);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.iv-close:hover {
  /* background: rgba(255, 255, 255, 0.24); */
  /* border-color: rgba(255, 255, 255, 0.7); */
  transform: rotate(90deg);
}

.iv-close:focus-visible {
  outline: 1px solid #e3d3b4;
  outline-offset: 0px;
}

/* ---------- 底部操作提示 ---------- */
.iv-hint {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px) + 12px);
  transform: translateX(-50%);
  z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}

.iv-hint .iv-hint-touch {
  display: none;
}

/* 触屏设备显示触摸版提示文案 */
@media (hover: none) and (pointer: coarse) {
  .iv-hint .iv-hint-mouse { display: none; }
  .iv-hint .iv-hint-touch { display: inline; }
}

/* ---------- 加载失败提示 ---------- */
.iv-error {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: none;
  padding: 18px 26px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  max-width: 76vw;
}

.iv-overlay.iv-error-state .iv-error { display: block; }
.iv-overlay.iv-error-state .iv-hint { display: none; }

/* ---------- 缩放倍率显示 ---------- */
.iv-zoom {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px) + 12px);
  bottom: max(16px, env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.iv-overlay.iv-zoomed .iv-zoom { opacity: 1; }

/* ---------- 分组轮播切换按钮（上一张 / 下一张） ---------- */
.iv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 无分组 / 组内单图 / 到达边界（非循环模式）时由 JS 设置 hidden 隐藏 */
.iv-nav[hidden] {
  display: none;
}

.iv-prev {
  left: max(16px, env(safe-area-inset-left, 0px) + 12px);
}

.iv-next {
  right: max(16px, env(safe-area-inset-right, 0px) + 12px);
}

.iv-nav svg {
  display: block;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.iv-nav:hover {
  /* background: rgba(255, 255, 255, 0.24); */
  /* border-color: rgba(255, 255, 255, 0.7); */
}

.iv-prev:hover { transform: translateY(-50%) translateX(-2px); }
.iv-next:hover { transform: translateY(-50%) translateX(2px); }

.iv-nav:focus-visible {
  outline: 1px solid #e3d3b4;
  outline-offset: 0px;
}

/* 移动端：缩小按钮尺寸，避免遮挡图片 */
@media (max-width: 640px) {
  .iv-nav {
    width: 40px;
    height: 40px;
  }
}

/* ---------- 无障碍 / 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .iv-overlay,
  .iv-img,
  .iv-close,
  .iv-nav {
    transition-duration: 0.01ms !important;
  }
}