/* ==========================================================================
   🖼️ CookieTune 唯美白边框拍立得艺术相片墙 (photo-wall.css)
   特性：
   - 处于主界面上层 (z-index: 500)，但低于所有模态弹窗对话框 (z-index: 9999)
   - 纯净高质感白边框 (Polaroid) + 真实柔和的多层弥散阴影
   - 底部精致手写签字笔签名 / 随心物语 (支持 [链接文案](url) Markdown 超链接语法并精美渲染)
   - 支持鼠标与触屏自由拖拽位置与自由旋转角度
   - 拖拽相片支持跨屏左右穿梭，四周边框安全保护
   - 响应式控制：仅在 PC 大屏 (宽屏) 空间充裕时优雅呈现
   ========================================================================== */

/* 全局相片墙挂载层 (处于主页面上层 z-index: 100，但绝对低于所有弹窗对话框与影院剧场 z-index: 9999+) */
.photo-wall-stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 100 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.photo-wall-stage.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 🌟 当任意模态弹窗（设置、换肤、上传、登录、音效、原图鉴赏）或影院剧场全屏打开时，相片墙绝对处于底层且不可交互 */
body:has(.modal-backdrop.active) .photo-wall-stage,
body:has(#cinema-studio-modal.active) .photo-wall-stage,
body.cinema-studio-active .photo-wall-stage,
body.modal-open .photo-wall-stage {
  z-index: 50 !important;
  pointer-events: none !important;
}

body:has(.modal-backdrop.active) .polaroid-card,
body:has(#cinema-studio-modal.active) .polaroid-card,
body.cinema-studio-active .polaroid-card {
  pointer-events: none !important;
}

:root {
  /* 🖼️ 1K / 1080p 标准高清屏拍立得相片尺寸 (默认基准，紧凑雅致) */
  --polaroid-width: clamp(135px, 8.5vw, 155px);
  --polaroid-max-width: 160px;
  --polaroid-min-width: 110px;
  --polaroid-padding: 6px 6px 12px 6px;
  --polaroid-has-caption-pb: 16px;
  --polaroid-img-max-h: 180px;
  --polaroid-caption-font-size: 11.5px;
  --polaroid-caption-mt: 5px;
  --polaroid-caption-min-h: 14px;
  --polaroid-handle-size: 20px;
  --polaroid-handle-top: -8px;
  --polaroid-handle-right: -8px;
  --polaroid-handle-font-size: 10px;
}

/* 📱 1100px - 1440px 较紧凑宽屏比例微调 */
@media (min-width: 1101px) and (max-width: 1440px) {
  :root {
    --polaroid-width: clamp(118px, 8vw, 136px);
    --polaroid-max-width: 140px;
    --polaroid-min-width: 95px;
    --polaroid-padding: 5px 5px 10px 5px;
    --polaroid-has-caption-pb: 13px;
    --polaroid-img-max-h: 150px;
    --polaroid-caption-font-size: 10.5px;
    --polaroid-caption-mt: 4px;
    --polaroid-caption-min-h: 12px;
    --polaroid-handle-size: 18px;
    --polaroid-handle-top: -7px;
    --polaroid-handle-right: -7px;
    --polaroid-handle-font-size: 9.5px;
  }
}

/* 🖥️ 2K (2000px - 3199px) 超高清大屏自适应等比缩放 */
@media (min-width: 2000px) and (max-width: 3199px) {
  :root {
    --polaroid-width: clamp(180px, 8.5vw, 220px);
    --polaroid-max-width: 230px;
    --polaroid-min-width: 150px;
    --polaroid-padding: 9px 9px 18px 9px;
    --polaroid-has-caption-pb: 22px;
    --polaroid-img-max-h: 270px;
    --polaroid-caption-font-size: 14px;
    --polaroid-caption-mt: 8px;
    --polaroid-caption-min-h: 18px;
    --polaroid-handle-size: 25px;
    --polaroid-handle-top: -10px;
    --polaroid-handle-right: -10px;
    --polaroid-handle-font-size: 12px;
  }
}

/* 🖥️ 4K (≥ 3200px) 超大屏等比放大 */
@media (min-width: 3200px) {
  :root {
    --polaroid-width: clamp(260px, 8.5vw, 320px);
    --polaroid-max-width: 340px;
    --polaroid-min-width: 230px;
    --polaroid-padding: 14px 14px 26px 14px;
    --polaroid-has-caption-pb: 32px;
    --polaroid-img-max-h: 400px;
    --polaroid-caption-font-size: 20px;
    --polaroid-caption-mt: 12px;
    --polaroid-caption-min-h: 26px;
    --polaroid-handle-size: 34px;
    --polaroid-handle-top: -14px;
    --polaroid-handle-right: -14px;
    --polaroid-handle-font-size: 16px;
  }
}

/* 单个拍立得白边框相片卡片 (纯净高质感 Polaroid 纸质感，支持卡片间层级叠加) */
.polaroid-card {
  position: absolute !important;
  pointer-events: auto !important;
  background: #ffffff !important;
  padding: var(--polaroid-padding, 6px 6px 12px 6px) !important;
  border-radius: 3px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.3) !important;
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
  transform-origin: center center !important;
  /* 仅对阴影过渡，绝对不对 left/top 进行过渡以避免拖拽跳动 */
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: var(--polaroid-width, 148px) !important;
  max-width: var(--polaroid-max-width, 160px) !important;
  min-width: var(--polaroid-min-width, 110px) !important;
  box-sizing: border-box !important;
  will-change: transform, left, top;
}

.polaroid-card:hover {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 117, 140, 0.35) !important;
}

.polaroid-card.is-dragging {
  cursor: grabbing !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(255, 117, 140, 0.45) !important;
  transition: none !important;
}

/* 照片本体画面展示区 */
.polaroid-img-wrap {
  width: 100% !important;
  background: #111118 !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none !important;
}

.polaroid-img {
  width: 100% !important;
  height: auto !important;
  max-height: var(--polaroid-img-max-h, 180px) !important;
  object-fit: cover !important;
  display: block !important;
  pointer-events: none !important;
  border-radius: 1px !important;
  transition: filter 0.3s ease !important;
}

/* 底部手写感白边文案区 (仿细签字笔、随心物语) */
.polaroid-caption {
  font-family: 'Caveat', 'Kalam', 'Architects Daughter', 'Ma Shan Zheng', 'Noto Serif SC', cursive, sans-serif !important;
  color: #2c2738 !important;
  font-size: var(--polaroid-caption-font-size, 11.5px) !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-top: var(--polaroid-caption-mt, 5px) !important;
  padding: 0 3px !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  letter-spacing: 0.3px !important;
  min-height: var(--polaroid-caption-min-h, 14px) !important;
  position: relative !important;
  z-index: 2 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.polaroid-caption:empty {
  display: none !important;
}

/* 🌟 美化相片底部 Markdown 超链接样式 */
.polaroid-link {
  color: #e84393 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  background: rgba(232, 67, 147, 0.08) !important;
  border-bottom: 1.5px dashed rgba(232, 67, 147, 0.6) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.polaroid-link::after {
  content: "↗" !important;
  font-size: 10px !important;
  opacity: 0.75 !important;
  margin-left: 1px !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  transition: transform 0.2s ease !important;
}

.polaroid-link:hover {
  color: #ffffff !important;
  background: #e84393 !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 3px 10px rgba(232, 67, 147, 0.4) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

.polaroid-link:hover::after {
  opacity: 1 !important;
  transform: translate(1px, -1px) !important;
}

/* 带有文案时加大底部白色底边 */
.polaroid-card.has-caption {
  padding-bottom: var(--polaroid-has-caption-pb, 16px) !important;
}

/* 照片微型旋转把手 (Hover 时右上角出现小把手) */
.polaroid-rotate-handle {
  position: absolute !important;
  top: var(--polaroid-handle-top, -8px) !important;
  right: var(--polaroid-handle-right, -8px) !important;
  width: var(--polaroid-handle-size, 20px) !important;
  height: var(--polaroid-handle-size, 20px) !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(255, 117, 140, 0.6) !important;
  border-radius: 50% !important;
  color: #ff758c !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--polaroid-handle-font-size, 10px) !important;
  cursor: grab !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.polaroid-card:hover .polaroid-rotate-handle {
  display: flex !important;
}

.polaroid-rotate-handle:hover {
  background: #ff758c !important;
  color: #ffffff !important;
  transform: scale(1.15) rotate(45deg) !important;
}

/* 🌟 顶部导航栏中新增的照片墙工具胶囊按钮组 */
.photo-wall-nav-pill {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--radius-full, 20px) !important;
  padding: 2px 4px !important;
  gap: 3px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.25s ease !important;
}

.photo-wall-nav-pill:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 117, 140, 0.4) !important;
}

.photo-nav-action-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.photo-nav-action-btn:hover {
  background: rgba(255, 117, 140, 0.2) !important;
  color: #55efc4 !important;
}

.photo-nav-action-btn.active {
  background: rgba(255, 117, 140, 0.3) !important;
  color: #ffd6df !important;
}

/* ⚙️ 设置弹窗中的相片墙管理面板专属样式 */
.settings-photos-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  height: 100% !important;
}

.photos-manager-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px dashed rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
}

/* 🖼️ 相片墙管理头部操作按钮统一样式 */
.photo-wall-head-btn,
.uploader-secondary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full, 24px) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  outline: none !important;
  box-sizing: border-box !important;
  height: 36px !important;
}

.photo-wall-head-btn.primary,
#photo-wall-add-btn {
  background: var(--primary-gradient, linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%)) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 3px 14px rgba(255, 117, 140, 0.45) !important;
}

.photo-wall-head-btn.primary:hover,
#photo-wall-add-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(255, 117, 140, 0.65) !important;
}

.photo-wall-head-btn.secondary,
.uploader-secondary-btn,
#photo-wall-reset-pos-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

.photo-wall-head-btn.secondary:hover,
.uploader-secondary-btn:hover,
#photo-wall-reset-pos-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

.photo-wall-head-btn.success,
#photo-wall-save-cloud-btn {
  background: rgba(85, 239, 196, 0.15) !important;
  border: 1px solid rgba(85, 239, 196, 0.45) !important;
  color: #55efc4 !important;
  box-shadow: 0 2px 10px rgba(85, 239, 196, 0.2) !important;
}

.photo-wall-head-btn.success:hover,
#photo-wall-save-cloud-btn:hover {
  background: rgba(85, 239, 196, 0.28) !important;
  border-color: rgba(85, 239, 196, 0.75) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(85, 239, 196, 0.4) !important;
}

.photos-grid-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  flex: 1 !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
}

.photo-editor-card {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.photo-editor-card:hover {
  border-color: rgba(255, 117, 140, 0.5) !important;
  background: rgba(0, 0, 0, 0.55) !important;
}

.photo-editor-thumb-wrap {
  width: 100% !important;
  height: 160px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #151020 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.photo-editor-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.photo-editor-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.photo-caption-input {
  width: 100% !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.photo-caption-input:focus {
  border-color: #ff758c !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

.photo-editor-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

/* 📱 响应式保护：手机和超小屏自动隐藏相片墙以保留专注播放体验 */
@media (max-width: 1100px) {
  .photo-wall-stage {
    display: none !important;
  }
  .photo-wall-nav-pill {
    display: none !important;
  }
}