/*
 * CoLensMe · 自建大图层样式（0.9.955）
 *
 * 只作用于 #colensme-lightbox-layer（.cllb-*），不使用 .mini-imgbox / .swiper-*，
 * 避免被给主题灯箱写的样式误伤，也避免影响主题灯箱本身。
 * 外观以线上实测为准；html.lg（液态玻璃开）时按 liquid-glass 的取值再覆盖一层。
 */

.cllb {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: none;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.cllb.cllb-show { display: block; }
/* 空闲预建时供 LG 量按钮尺寸，不参与显示 */
.cllb.cllb-measure { display: block; visibility: hidden; pointer-events: none; }

.cllb-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .3s ease;
}

.cllb-media {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  touch-action: none;
  cursor: grab;
}
.cllb-media:active { cursor: grabbing; }
.cllb-media.cllb-animating { will-change: transform; }
.cllb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.cllb-ghost {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.cllb-ghost img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── 顶部工具（46px 圆钮，与主题 imgbox 一致） ─────────────── */
.cllb-tools {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* P2：淡入淡出挂在每个按钮自身（外层 opacity 会让 liquid-glass 的折射失效） */
.cllb-tool {
  opacity: 0;
  translate: 0 -4px;
  pointer-events: none;
  transition: opacity .15s ease, translate .15s ease, background-color .25s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.34,1.56,.64,1);
}
.cllb.cllb-ui-visible .cllb-tool {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  transition: opacity .2s ease, translate .2s ease, background-color .25s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.34,1.56,.64,1);
}
/* 打开/关闭动画期间固定按钮大小，避免鼠标正好悬停时“忽大忽小” */
#colensme-lightbox-layer.cllb-tools-locked .cllb-tool,
#colensme-lightbox-layer.cllb-tools-locked .cllb-tool:hover,
#colensme-lightbox-layer.cllb-tools-locked .cllb-tool:active {
  transform: none !important;
  transition: opacity .15s ease, translate .15s ease, background-color .25s ease !important;
}
.cllb-tool {
  position: relative;
  overflow: hidden;
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .6), inset 0 0 16px -4px rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(0, 0, 0, .6);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background-color .25s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.cllb-tool:hover { background: rgba(255, 255, 255, .24); transform: scale(1.06); }
.cllb-tool:active { transform: scale(.93); }
.cllb-tool.is-active { background: rgba(255, 255, 255, .24); }
.cllb-tool[hidden] { display: none; }
.cllb-tool i {
  position: relative;
  z-index: 1;
  font-size: 14px;
  line-height: 1;
}
.cllb-ripple {
  position: absolute;
  z-index: 0;
  display: block;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
  transform: scale(0);
  pointer-events: none;
  transition: transform 1.5s cubic-bezier(.22, .61, .36, 1), opacity 1.5s cubic-bezier(.22, .61, .36, 1);
}

/* ── 页码 / 左右箭头 / 缩略图条 ──────────────────────────────── */
.cllb-counter {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 8px 10px;
  color: #f3f3f7;
  font-size: 14px;
  line-height: 20px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.cllb.cllb-ui-visible .cllb-counter { opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
.cllb-counter[hidden] { display: none; }

.cllb-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 52px;
  height: 84px;
  margin-top: -42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(24, 26, 31, .42);
  color: #fff;
  font-size: 34px;
  line-height: 84px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, background .15s, transform .15s ease;
  transform: translateY(-4px);
}
.cllb.cllb-ui-visible .cllb-nav { opacity: .5; pointer-events: auto; transform: none; transition: opacity .2s ease, background .15s, transform .2s ease; }
.cllb.cllb-ui-visible .cllb-nav:hover { opacity: .95; background: rgba(24, 26, 31, .8); }
.cllb-nav[hidden] { display: none; }
.cllb-prev { left: 10px; }
.cllb-next { right: 10px; }

.cllb-thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  height: 120px;
  padding: 10px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(30, 30, 38, .4);
  scrollbar-width: thin;
}
.cllb-thumbs[hidden] { display: none; }
.cllb-thumbs img {
  flex: none;
  width: 92px;
  height: 92px;
  margin: 0 3px;
  border: 4px solid transparent;
  object-fit: cover;
  cursor: pointer;
  box-sizing: border-box;
  opacity: .8;
}
.cllb-thumbs img.is-active { border-color: rgb(240, 68, 148); opacity: 1; }

/* ── 底部操作栏（复用插件 Ho() 生成的 .smgpt-theme-lightbox-actions） ── */
.cllb-actions {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.cllb-actions[hidden] { display: none; }
/* P1：透明度/位移加在栏本身（祖层 opacity 会把 backdrop-filter 的取景切断） */
#colensme-lightbox-layer .cllb-actions > .smgpt-theme-lightbox-actions {
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 140ms ease, transform 160ms ease;
}
#colensme-lightbox-layer.cllb-actions-visible .cllb-actions > .smgpt-theme-lightbox-actions {
  pointer-events: auto;
  opacity: 1;
  transform: none;
  transition: opacity 140ms ease, transform 160ms ease;
}

/* 点图隐藏 / 显示操作栏（与主题灯箱的状态一致） */
#colensme-lightbox-layer.cllb-actions-hidden .cllb-actions > .smgpt-theme-lightbox-actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 120ms ease, transform 140ms ease;
}

/* ── 手机 ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 主题在手机上隐藏全屏按钮（hide-sm） */
  .cllb-tool[data-tool="fullscreen"] { display: none; }
}
@media (max-width: 640px) {
  .cllb-counter { top: 6px; left: 6px; padding: 6px 8px; font-size: 13px; }
  .cllb-nav { width: 38px; height: 64px; line-height: 64px; font-size: 26px; margin-top: -32px; }
}

/* 0.9.959 B2：大图层“正在保存到云端”进度条放到操作栏按钮区上方；
 * 不再走基础规则的 position:absolute（会压在最后一排按钮上）。
 * 主题灯箱 .mini-imgbox 保持同一条规则。 */
:is(.mini-imgbox, #colensme-lightbox-layer) .smgpt-theme-lightbox-cloud-progress {
  position: static;
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
  animation: cllb-cloud-progress-in 160ms ease-out;
}
@keyframes cllb-cloud-progress-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* 0.9.959 B1：新层里的收藏“已收藏”态用粉色 + 心形，和全局绿色选中态区分开。 */
html.lg #colensme-lightbox-layer .cllb-actions .smgpt-theme-lightbox-actions .smgpt-gallery-favorite-button[aria-pressed="true"] {
  color: #ff6fb5 !important;
  background: rgba(239, 61, 149, .18) !important;
  border-color: rgba(255, 111, 181, .55) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 111, 181, .18) !important;
}
html.lg #colensme-lightbox-layer .cllb-actions .smgpt-theme-lightbox-actions .smgpt-gallery-favorite-button[aria-pressed="true"]::before {
  content: "♥";
  margin-right: 4px;
  font-size: 11px;
}

/* ★ 1.0.6 预留滚动条槽位时，灯箱必须铺到 100vw，否则右侧露出 15px 空白带 */
html.cllb-gutter #colensme-lightbox-layer,
html.cllb-gutter .cllb-backdrop {
  width: 100vw !important;
  max-width: none !important;
  right: auto !important;
  left: 0 !important;
}

/* ★ 1.0.6 锁滚动时保留滚动条：即使主题给 html 设了 overflow:hidden，这里也顶回去。
   （只覆盖样式，不改主题文件） */
html.cllb-scroll-locked { overflow-y: scroll !important; }