/* 回忆地图 · 样式 — 电脑端回忆卡片风格、那年今日、图片加载骨架屏与展开动效、筛选框 */
 /* ==========================================================================
【小红书风格】电脑端回忆详情页 - 左文右图双栏布局
========================================================================== */
 @media (min-width: 769px) {

     /* 遮罩层：column 布局，弹窗在上，按钮在下，两者居中 */
     #detail-overlay {
         background: rgba(0, 0, 0, 0.45) !important;
         backdrop-filter: blur(12px) !important;
         -webkit-backdrop-filter: blur(12px) !important;
         flex-direction: column !important;
         justify-content: center !important;
         align-items: center !important;
         gap: 20px !important;
     }

     /* 主卡片：左图右文布局
        整体宽度由图片自适应决定，右侧文字列固定 480px
        不设固定 max-width，让图片撑开 */
     #detail-overlay .modal-content-box {
         display: flex !important;
         flex-direction: row !important;
         width: auto !important;
         max-width: 96vw !important;
         height: 88vh !important;
         max-height: 920px !important;
         padding: 0 !important;
         border-radius: 20px !important;
         overflow: hidden !important;
         border: none !important;
         box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3) !important;
         position: relative !important;
         bottom: auto !important;
         left: auto !important;
         top: auto !important;
         transform: none !important;
         transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
     }

     /* 左侧：图片轮播区域（flex:1，随图片宽度自适应） */
     #detail-img-carousel {
         flex: 1 1 auto !important;
         background: #fff !important;
         position: relative !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
         overflow: hidden !important;
         height: 100% !important;
         min-width: 0 !important;
         padding-bottom: 0 !important;
         box-sizing: border-box !important;
     }
     html.dark-mode #detail-img-carousel {
         background: #111113 !important;
     }

     /* 右侧：文字区域（固定 480px，不参与 flex 伸缩） */
     #detail-content {
         flex: 0 0 480px !important;
         width: 480px !important;
         height: 100% !important;
         overflow-y: auto !important;
         padding: 48px 40px 80px 40px !important;
         box-sizing: border-box !important;
         border-left: 1px solid rgba(0, 0, 0, 0.07) !important;
         border-right: none !important;
         max-height: none !important;
         background: #fff !important;
         order: 2 !important;
     }
     html.dark-mode #detail-content {
         background: #1c1c1e !important;
         border-left-color: rgba(255,255,255,0.08) !important;
     }

     /* 图片区域在左 */
     #detail-img-carousel {
         order: 1 !important;
     }

     /* 轮播图片：完全填满容器，contain保证不裁切 */
     #detail-carousel-img {
         position: absolute !important;
         top: 0 !important;
         left: 0 !important;
         width: 100% !important;
         height: 100% !important;
         object-fit: contain !important;
         display: block !important;
         transition: opacity 0.3s ease !important;
     }

     /* 轮播箭头按钮：圆形半透明背景，白色箭头 */
     .carousel-nav-btn {
         position: absolute !important;
         top: 50% !important;
         transform: translateY(-50%) !important;
         background: rgba(255, 255, 255, 0.12) !important;
         border: none !important;
         color: #fff !important;
         width: 44px !important;
         height: 44px !important;
         border-radius: 50% !important;
         font-size: 20px !important;
         cursor: pointer !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
         z-index: 10 !important;
         transition: opacity 0.25s, background 0.18s !important;
         opacity: 0 !important;
         pointer-events: none !important;
     }

     /* 仅当鼠标在图片区域内时，显示按钮 */
     #detail-img-carousel:hover .carousel-nav-btn {
         opacity: 1 !important;
         pointer-events: auto !important;
     }

     /* 禁用状态的按钮：hover 时也保持完全隐藏 */
     #detail-img-carousel:hover .carousel-nav-btn:disabled {
         opacity: 0 !important;
         pointer-events: none !important;
     }

     .carousel-nav-btn:hover {
         background: rgba(255, 255, 255, 0.22) !important;
     }

     #carousel-prev {
         left: 14px !important;
     }

     #carousel-next {
         right: 14px !important;
     }

     /* 图片计数器：默认隐藏，只在图片区域 hover 时显示 */
     #carousel-counter {
         position: absolute !important;
         top: 14px !important;
         left: 14px !important;
         transform: none !important;
         background: rgba(0, 0, 0, 0.28) !important;
         color: rgba(255, 255, 255, 0.85) !important;
         font-size: 12px !important;
         font-weight: 700 !important;
         font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
         padding: 4px 10px !important;
         border-radius: 20px !important;
         z-index: 10 !important;
         letter-spacing: 0.5px !important;
         opacity: 0 !important;
         transition: opacity 0.25s !important;
     }

     /* 仅当鼠标在图片区域内时，显示计数器 */
     #detail-img-carousel:hover #carousel-counter {
         opacity: 1 !important;
     }

     /* 底部缩略图条 - 电脑端隐藏 */
     #carousel-thumbs {
         display: none !important;
     }

     /* 无图占位符 */
     #detail-no-img-placeholder {
         display: flex !important;
         flex-direction: column !important;
         align-items: center !important;
         justify-content: center !important;
         color: rgba(255, 255, 255, 0.3) !important;
         font-size: 14px !important;
         font-weight: 700 !important;
         gap: 12px !important;
     }

     /* 叉号关闭按钮：放在右侧文字区顶部 */
     #detail-overlay .close-modal {
         top: 14px !important;
         right: 14px !important;
         z-index: 20 !important;
     }

     /* 底部操作按钮：底部居中 */
     #detail-external-actions {
         position: absolute !important;
         bottom: 28px !important;
         left: 50% !important;
         right: auto !important;
         transform: translateX(-50%) !important;
         width: auto !important;
         display: flex !important;
         justify-content: center !important;
         gap: 16px !important;
         z-index: 30 !important;
     }
 }

 /* ================= 1. 排版与满屏基础样式 ================= */
 @media screen and (max-width: 768px) {
     #otd-overlay.active {
         padding: 0 !important;
         align-items: flex-end !important;
         justify-content: center !important;
     }

     #otd-overlay .modal-content-box {
         width: 100vw !important;
         max-width: 100vw !important;
         min-width: 100vw !important;
         height: 85vh !important;
         margin: 0 !important;
         padding: 0 !important;
         left: 0 !important;
         right: 0 !important;
         bottom: 0 !important;
         transform: none !important;
         border-radius: 24px 24px 0 0 !important;
         position: absolute !important;
     }
 }

 @media screen and (min-width: 769px) {
     #otd-overlay .modal-content-box {
         width: 85% !important;
         max-width: 1000px !important;
         border-radius: 24px !important;
         left: 50% !important;
         transform: translateX(-50%) !important;
     }
 }

 /* ================= 2. 电脑端专属：卡片悬浮动效 ================= */
 @media screen and (min-width: 769px) {
     #otd-content .moment-card {
         /* 添加平滑过渡效果 */
         transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
         /* will-change disabled: see mobile override */
         will-change: transform;
     }

     #otd-content .moment-card:hover {
         transform: translateY(-6px) !important;
         /* 鼠标悬浮时向上平滑浮动 6px */
         box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
         /* 增加柔和的弥散阴影 */
         border-color: #000 !important;
         /* 边框颜色加深 */
     }
 }




 /* ==========================================================
    【那年今日 (On This Day)】专属样式模块
    ========================================================== */

 /* --- 1. 手机端：强行贴底满屏，打破遮挡 --- */
 @media screen and (max-width: 768px) {
     #otd-overlay {
         display: none !important;
         /* 平时隐藏 */
     }

     #otd-overlay.active {
         display: flex !important;
         padding: 0 !important;
         align-items: flex-end !important;
         /* 贴底 */
         justify-content: center !important;
     }

     #otd-overlay .modal-content-box {
         width: 100vw !important;
         max-width: 100vw !important;
         min-width: 100vw !important;
         height: 85vh !important;
         margin: 0 !important;
         padding: 0 !important;
         left: 0 !important;
         right: 0 !important;
         bottom: 0 !important;
         transform: none !important;
         border-radius: 24px 24px 0 0 !important;
         position: absolute !important;
     }
 }

 /* --- 2. 电脑端：居中排版与悬浮动效 --- */
 @media screen and (min-width: 769px) {
     #otd-overlay .modal-content-box {
         width: 85% !important;
         max-width: 1000px !important;
         border-radius: 24px !important;
         left: 50% !important;
         transform: translateX(-50%) !important;
     }

     /* 电脑端鼠标悬浮时的动态阴影与上浮效果 */
     .otd-card-hover {
         transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
         will-change: transform;
     }

     .otd-card-hover:hover {
         transform: translateY(-6px) !important;
         box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
         border-color: #000 !important;
     }
 }

 /* 强行覆盖手机端排版，满屏贴底 */
 @media screen and (max-width: 768px) {
     #otd-overlay {
         display: none !important;
     }

     #otd-overlay.active {
         display: flex !important;
         padding: 0 !important;
         align-items: flex-end !important;
         justify-content: center !important;
     }

     #otd-overlay .modal-content-box {
         width: 100vw !important;
         max-width: 100vw !important;
         min-width: 100vw !important;
         height: 85vh !important;
         margin: 0 !important;
         padding: 0 !important;
         left: 0 !important;
         right: 0 !important;
         bottom: 0 !important;
         transform: none !important;
         border-radius: 24px 24px 0 0 !important;
         position: absolute !important;
     }
 }

 /* 强行覆盖电脑端排版与动效 */
 @media screen and (min-width: 769px) {
     #otd-overlay .modal-content-box {
         width: 85% !important;
         max-width: 1000px !important;
         border-radius: 24px !important;
         left: 50% !important;
         transform: translateX(-50%) !important;
     }

     .otd-card-hover {
         transition: transform 0.3s, box-shadow 0.3s !important;
     }

     .otd-card-hover:hover {
         transform: translateY(-6px) !important;
         box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
         border-color: #000 !important;
     }
 }

 /* 1. 手机端样式：满屏贴底 */
 @media screen and (max-width: 768px) {
     #otd-overlay.active {
         display: flex !important;
         padding: 0 !important;
         align-items: flex-end !important;
         /* 强制贴底 */
         justify-content: center !important;
     }

     #otd-overlay .modal-content-box {
         width: 100vw !important;
         max-width: 100vw !important;
         min-width: 100vw !important;
         height: 85vh !important;
         margin: 0 !important;
         padding: 0 !important;
         left: 0 !important;
         right: 0 !important;
         bottom: 0 !important;
         transform: none !important;
         border-radius: 24px 24px 0 0 !important;
         position: absolute !important;
     }
 }

 /* 2. 电脑端样式：大尺寸完美双向居中 */
 @media screen and (min-width: 769px) {
     #otd-overlay.active {
         display: flex !important;
         align-items: center !important;
         /* 垂直居中 */
         justify-content: center !important;
         /* 水平居中 */
     }

     #otd-overlay .modal-content-box {
         width: 92% !important;
         /* 占据屏幕宽度的 92% */
         max-width: 1400px !important;
         /* 最大宽度从 1000 提升到 1400 */
         height: 90vh !important;
         /* 高度占据屏幕的 90% */
         max-height: 900px !important;
         /* 最大高度限制 */
         border-radius: 24px !important;

         /* 清除之前的定位，使用 flex 布局自动居中 */
         position: relative !important;
         left: auto !important;
         top: auto !important;
         transform: none !important;
         margin: 0 !important;
     }

     /* 电脑端卡片悬浮动效 */
     .otd-card-hover {
         transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s !important;
     }

     .otd-card-hover:hover {
         transform: translateY(-8px) !important;
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
         border-color: #000 !important;
     }
 }

 /* ================= 图片加载动画 ================= */
 /* 1. 图片默认完全透明，并加上半秒的淡入动画 */

 /* 2. 当图片加载完成后，加上 loaded 类名，变为完全不透明 */

 /* 3. 给图片的父容器（比如卡片）加上骨架屏闪烁动画 */

 @keyframes skeleton-loading {
     0% {
         background-position: 200% 0;
     }

     100% {
         background-position: -200% 0;
     }
 }

 /* ================= 固定比例图片骨架屏容器（城市卡片、时光轴封面） ================= */
 /* 包裹城市卡封面图的骨架容器：在图片加载前显示闪烁占位 */
 .img-skeleton-wrap {
     position: relative;
     width: 100%;
     aspect-ratio: 1 / 1;
     border-radius: 14px;
     overflow: hidden;
     margin-bottom: 9px;
     background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
     background-size: 200% 100%;
     animation: skeleton-shimmer 1.4s ease-in-out infinite;
     flex-shrink: 0;
     contain: layout style;
 }
 html.dark-mode .img-skeleton-wrap {
     background: linear-gradient(90deg, #2c2c2e 25%, #232325 50%, #2c2c2e 75%) !important;
     background-size: 200% 100% !important;
 }

 /* 图片加载完成后停止骨架动画 */
 .img-skeleton-wrap.img-loaded {
     animation: none !important;
     background: transparent !important;
     background-image: none !important;
 }

 .img-skeleton-wrap img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
     display: block;
 }

 .img-skeleton-wrap img.loaded {
     opacity: 1;
 }

 @keyframes skeleton-shimmer {
     0% {
         background-position: 200% 0;
     }

     100% {
         background-position: -200% 0;
     }
 }

 /* 通用骨架屏：插入卡片后立即显示，图片加载完后移除 */
 .img-loading-skeleton {
     background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
     background-size: 200% 100%;
     animation: skeleton-shimmer 1.4s ease-in-out infinite;
     contain: layout style;
     /* will-change 只在动画期间有效，加载完后 img-skeleton-done 会清掉动画 */
 }
 html.dark-mode .img-loading-skeleton {
     background: linear-gradient(90deg, #2c2c2e 25%, #232325 50%, #2c2c2e 75%) !important;
     background-size: 200% 100% !important;
 }

 .img-loading-skeleton img {
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 .img-loading-skeleton.img-skeleton-done {
     animation: none !important;
     background: transparent !important;
 }

 .img-loading-skeleton.img-skeleton-done img {
     opacity: 1;
 }

 /* ================= 回忆卡片图片：渐进展开动效 ================= */
 /* 用 CSS grid trick 让高度从 0 平滑过渡到自然高度 */
 .moment-img-wrap {
     display: grid;
     grid-template-rows: 0fr;
     opacity: 0;
     transition:
         grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
     margin-top: 0;
     /* 顶部间距也做过渡 */
     transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
         margin-top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .moment-img-wrap.img-expanded {
     grid-template-rows: 1fr;
     opacity: 1;
     margin-top: 10px;
     background: transparent;
 }

 /* 必须有 min-height:0 才能让 grid trick 生效 */
 .moment-img-wrap-inner {
     min-height: 0;
     overflow: hidden;
 }

 .moment-img-wrap-inner img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 12px;
     margin-bottom: 0;
     /* 图片本身从透明开始，与画廊淡入效果一致 */
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 /* onload 后加上此 class，图片丝滑淡入 */
 .moment-img-wrap-inner img.img-loaded {
     opacity: 1;
 }

 /* ================= 回忆详情：图片预留占位块 ================= */
 .detail-img-box {
     width: 100%;
     min-height: 250px;
     /* 关键：强制撑开至少250px的高度，告诉用户这里有东西 */
     background-color: #f2f2f2;
     /* 浅浅的灰色 */
     border-radius: 16px;
     margin-bottom: 15px;
     position: relative;
     overflow: hidden;
 }
 html.dark-mode .detail-img-box {
     background-color: #2c2c2e !important;
 }

 /* 内部图片默认透明，带有丝滑淡入动画 */
 .detail-img-box img {
     width: 100%;
     height: auto;
     display: block;
     opacity: 0;
     transition: opacity 0.5s ease;
 }

 /* 图片加载完成后的状态 */
 .detail-img-box img.loaded {
     opacity: 1;
 }

 /* ================= 回忆详情：高级图片加载动效 ================= */
 .detail-img-box {
     width: 100%;
     min-height: 250px;
     /* 预留高度防止跳动 */
     background: #f5f5f5;
     border-radius: 16px;
     margin-bottom: 15px;
     position: relative;
     overflow: hidden;
     /* 加载时的呼吸灯效果 */
     background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
     background-size: 200% 100%;
     animation: skeleton-pulse 1.5s ease-in-out infinite;
 }
 html.dark-mode .detail-img-box {
     background: linear-gradient(90deg, #2c2c2e 25%, #232325 50%, #2c2c2e 75%) !important;
     background-size: 200% 100% !important;
 }

 /* 呼吸灯关键帧 */
 @keyframes skeleton-pulse {
     0% {
         background-position: 200% 0;
     }

     100% {
         background-position: -200% 0;
     }
 }

 /* 图片初始状态：透明且稍微缩小 */
 .detail-img-box img {
     width: 100%;
     height: auto;
     display: block;
     opacity: 0;
     transform: scale(0.96);
     /* 稍微缩小一点 */
     transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
         transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: opacity, transform;
 }

 /* 图片加载成功：不透明且回复正常大小 */
 .detail-img-box img.loaded {
     opacity: 1;
     transform: scale(1);
     /* 恢复到原大 */
 }

 /* ==========================================================================
【终极修复】手机端标签筛选面板：按钮强行吸底，标签列表独立滚动
========================================================================== */

 /* 1. 把整个面板改成弹性盒子，并限制高度，禁止整体滑动 */
 #tag-filter-overlay .modal-content-box {
     display: flex !important;
     flex-direction: column !important;
     overflow: hidden !important;
     /* 关键：把外层的滚动条卡死 */
     padding-bottom: 25px !important;
     /* 给底部留点安全距离 */
 }

 /* 2. 保护标题区域：禁止被挤压 */
 #tag-filter-overlay .modal-content-box>div:first-of-type {
     flex-shrink: 0 !important;
 }

 /* 3. 核心：让中间的标签列表霸占所有剩余空间，并支持独立滚动 */
 #filter-tags-container-mobile {
     flex: 1 !important;
     overflow-y: auto !important;
     align-content: flex-start !important;
     /* 确保标签整齐从上往下排 */
     padding-bottom: 20px !important;

     /* 隐藏标签列表的滚动条，保持界面干净 */
     scrollbar-width: none !important;
 }

 #filter-tags-container-mobile::-webkit-scrollbar {
     display: none !important;
 }

 /* 4. 保护底部按钮区域：强行吸底，禁止被挤压 */
 #tag-filter-overlay .modal-content-box>div:last-of-type {
     flex-shrink: 0 !important;
     margin-top: 10px !important;
     padding-top: 15px !important;
     background: #fff !important;
     border-top: 1px solid #f5f5f5 !important;
     /* 加一条细线，分隔标签和按钮 */
 }
 html.dark-mode #tag-filter-overlay .modal-content-box>div:last-of-type {
     background: #1c1c1e !important;
     border-top-color: rgba(255,255,255,0.08) !important;
 }

 /* ==========================================================================
【PC端筛选框】专属吸底与标签尺寸优化
========================================================================== */
 #filter-panel-desktop {
     width: 380px !important;
     /* 稍微拓宽面板，显得大气 */
     padding: 0 !important;
     /* 必须清空外层边距，交给内部 Flex 处理 */
     overflow: hidden !important;
     /* 彻底干掉外层的滚动条 */
     max-height: 70vh !important;
     /* 限制最大高度 */
 }

 /* 内部内容盒容器 */
 #filter-panel-desktop>div {
     padding: 25px !important;
     box-sizing: border-box !important;
 }

 /* 将电脑端标签也缩小，变得精致 */
 #filter-tags-container-desktop .tag-capsule {
     font-size: 12px !important;
     padding: 6px 12px !important;
     border-radius: 8px !important;
     margin: 0 !important;
     border-width: 1px !important;
 }

 /* ==========================================================================
【PC端筛选框】大尺寸 & 终极胶囊样式
========================================================================== */

 /* 核心：把标签彻底变成胶囊形状 */
 #filter-tags-container-desktop .tag-capsule,
 .tag-capsule {
     border-radius: 50px !important;
     /* 关键：50px 保证了两头是半圆 */
     padding: 6px 16px !important;
     /* 左右拉长一点，胶囊感更强 */
     font-size: 13px !important;
     /* 文字大小适中 */
     font-weight: 400 !important;
     border-width: 1.5px !important;
     transition: all 0.2s ease !important;
 }

 /* 滚动条美化：让它更细一点，不影响美观 */
 #filter-tags-container-desktop::-webkit-scrollbar {
     width: 5px;
 }

 #filter-tags-container-desktop::-webkit-scrollbar-thumb {
     background: #eee;
     border-radius: 10px;
 }

 /* ==========================================================================
【层级修复】强制提升“新增/编辑回忆”弹窗的优先级，碾压详情页和地图
========================================================================== */
 #modal-overlay {
     z-index: 100000 !important;
     /* 设置为 100000，确保它在详情页(99999)之上 */
 }

 /* ==========================================================================
【极致丝滑 2.0】微信级照片浏览器 (支持缩放动效 + 单张锁定)
========================================================================== */
 #wx-lightbox {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: #000;
     z-index: 100005;
     display: none;
     /* 默认隐藏 */
     flex-direction: column;
     overflow: hidden;
     /* 防止 slider 溢出导致系统原生滚动条出现 */

     /* 背景淡入淡出动画 */
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 /* 当加上 active 类时，触发淡入 */
 #wx-lightbox.active {
     opacity: 1;
 }

 .wx-lightbox-header {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     padding: 20px;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #fff;
     font-size: 16px;
     font-weight: bold;
     z-index: 10;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
 }

 .wx-lightbox-close {
     font-size: 24px;
     cursor: pointer;
     width: 30px;
     height: 30px;
     text-align: right;
 }

 #wx-lightbox-slider {
     flex: 1;
     display: flex;
     width: 100vw;
     height: 100%;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
     scrollbar-width: none;
     -ms-overflow-style: none;

     /* 核心：图片由小变大的微信级“弹出”动画 */
     transform: scale(0.85);
     transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 /* 隐藏滚动条（全浏览器） */
 #wx-lightbox-slider::-webkit-scrollbar {
     display: none !important;
     width: 0 !important;
     height: 0 !important;
 }

 /* 当加上 active 类时，恢复正常大小 */
 #wx-lightbox.active #wx-lightbox-slider {
     transform: scale(1);
 }

 .wx-slide-item {
     flex: 0 0 100vw;
     width: 100vw;
     height: 100vh;
     scroll-snap-align: center;
     display: flex;
     justify-content: center;
     align-items: center;

     /* 【神仙属性】：强制刹车！无论划多快，一次只能滑过一张照片，防止“飞滑” */
     scroll-snap-stop: always;
 }

 .wx-slide-item img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     margin-top: 0px;
 }

 /* ==========================================================================
【真·全局展开动效】修复边框瞬间出现的 Bug，让整个卡片连带边框一起呼吸
========================================================================== */

 /* 1. 外层遮罩：使用关键帧动画强制淡入，解决 display 切换导致的动画失效 */
 #detail-overlay {
     display: none;
 }

 #detail-overlay.active {
     display: flex !important;
     animation: overlay-fade-in 0.3s ease forwards;
     /* 强制执行背景淡入 */
 }

 @keyframes overlay-fade-in {
     0% {
         background-color: rgba(0, 0, 0, 0);
         backdrop-filter: blur(0px);
     }

     100% {
         background-color: rgba(0, 0, 0, 0.5);
         backdrop-filter: blur(10px);
     }
 }

 /* 2. 核心：让【整个卡片本体（含边框）】从缩小状态弹性放大 */
 #detail-overlay.active .modal-content-box {
     /* 使用 @keyframes 替代 transition，确保百分百触发 */
     animation: card-pop-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     transform-origin: center center;
     /* 设定动画中心点为卡片正中间 */
     will-change: transform, opacity;
 }

 @keyframes card-pop-up {
     0% {
         opacity: 0;
         transform: scale(0.5) translateY(40px);
         /* 初始状态：只有原来的一半大，且靠下 */
     }

     100% {
         opacity: 1;
         transform: scale(1) translateY(0);
         /* 最终状态：原大，归位 */
     }
 }

 /* 3. 内部元素错落感：稍微调快一点，配合外框的放大 */
 #detail-overlay.active .modal-content-box>* {
     animation: content-fade-in 0.4s ease forwards;
     opacity: 0;
 }

 /* 框体先动，内容稍微晚零点几秒，营造极其高级的层次感 */
 #detail-overlay.active .modal-content-box>div:nth-child(1) {
     animation-delay: 0.05s;
 }

 #detail-overlay.active .modal-content-box>div:nth-child(2) {
     animation-delay: 0.1s;
 }

 #detail-overlay.active .modal-content-box>div:nth-child(3) {
     animation-delay: 0.15s;
 }

 @keyframes content-fade-in {
     from {
         opacity: 0;
         transform: translateY(15px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ios-bottom-bar 样式由末尾统一 CSS 控制 */

 /* 2. 内层的按钮本体：负责展示黑色胶囊 */
 #btn-save-main {
     display: block !important;
     width: 100% !important;
     background-color: #000000 !important;
     color: #ffffff !important;
     border-radius: 50px !important;
     /* 经典胶囊圆角 */
     padding: 14px !important;
     border: none !important;
     font-size: 16px !important;
     font-weight: bold !important;
     cursor: pointer !important;
     margin: 0 !important;
 }

 /* 确保表单容器允许吸底 */

 /* ==========================================================================
【优化】编辑/新增回忆页面：保存按钮始终完美吸底
========================================================================== */

 /* 1. 移除弹窗底部的预留空白，让吸底元素可以直接触碰到底部边缘 */
 #modal-overlay .modal-content-box {
     padding-bottom: 0 !important;
 }

 /* ios-bottom-bar 第二套旧样式已移除，由末尾统一 CSS 控制 */

 /* ==========================================================
    【微调】那年今日卡片：图片与下方日期地点的间距增加 2px
    ========================================================== */
 #otd-content .moment-card img {
     /* 如果你觉得 2px 不够，可以把这里的 2px 改成 4px 或 6px */
     margin-bottom: 4px !important;
 }