/* 回忆地图 · 样式 — 平板/手机细节、那年今日信封、云端同步状态灯、国家概览 */
 /* ==========================================================================
【电脑端文字加粗补丁】V2 适度描边 & 排除国家名
========================================================================== */
 @media (min-width: 769px) {

     /* 1. 面板顶部的大城市名 (例如：巴黎 Paris) */
     #display-city-name {
         font-weight: 700 !important;
         -webkit-text-stroke: 0px transparent !important;
         -webkit-font-smoothing: antialiased !important;
         color: #000 !important;
     }

     /* ✅ 【核心修复】：单独把国家名（如：法国 FRANCE）的描边去掉，恢复灰色 */
     #display-city-name div {
         -webkit-text-stroke: 0px transparent !important;
         /* 强制取消描边 */
         color: #888 !important;
         /* 维持原本的灰色 */
         font-weight: 700 !important;
         /* 恢复原本的粗细 */
     }

     /* 2. 瀑布流卡片里的回忆标题 */
     .moment-card .card-title-text,
     .city-overview-card .card-title-text,
     #memory-panel.timeline-mode .moment-card .card-title-text {
         font-weight: 900 !important;
         -webkit-text-stroke: 0.4px #000 !important;
         /* 【变细】小字体只需 0.2px 即可显出黑体效果 */
         -webkit-font-smoothing: antialiased !important;
         color: #000 !important;
     }
     html.dark-mode .moment-card .card-title-text,
     html.dark-mode .city-overview-card .card-title-text,
     html.dark-mode #memory-panel.timeline-mode .moment-card .card-title-text {
         -webkit-text-stroke: 0px transparent !important;
         color: #f2f2f7 !important;
     }

     /* 3. 详情弹窗里的大标题 */
     #detail-content-title {
         font-weight: 900 !important;
         -webkit-text-stroke: 0px transparent !important;
         -webkit-font-smoothing: antialiased !important;
         color: #000 !important;
     }
     #detail-title-inner {
         font-weight: 900 !important;
     }

     /* 4. 时光轴里的分界标题 */
     .timeline-city-text,
     .t-num {
         font-weight: 900 !important;
         -webkit-text-stroke: 0.3px #000 !important;
         /* 【变细】适度加黑 */
         -webkit-font-smoothing: antialiased !important;
     }
     html.dark-mode .timeline-city-text,
     html.dark-mode .t-num {
         -webkit-text-stroke: 0px transparent !important;
         color: #f2f2f7 !important;
     }
 }

 /* ==========================================================================
【手机端优化】缩小时光轴卡片内边距，减少四周留白
========================================================================== */
 @media (max-width: 768px) {

     /* 1. 核心调整：缩小卡片的内边距 */
     #memory-panel.timeline-mode .moment-card {
         padding: 15px 15px !important;
         /* 将四周的空白从原来的 24px 缩小到 15px */
         margin-bottom: 15px !important;
         /* 稍微缩短卡片之间的垂直间距 */
     }

     /* 2. 微调图片样式以适配更窄的边距 */
     #memory-panel.timeline-mode .moment-card img {
         margin-top: 10px !important;
         /* 缩小图片和上方文字的距离 */
         border-radius: 8px !important;
         /* 边距变小了，图片的圆角也稍微收敛一点更协调 */
     }

     /* 3. 微调标题与正文的间距 */
     #memory-panel.timeline-mode .moment-card .card-title-text {
         margin-bottom: 6px !important;
         /* 让标题和下面的内容稍微靠近一点 */
     }
 }

 /* ==========================================================================
【iPad / 平板专属优化】缩减列表卡片内部的标签胶囊尺寸
========================================================================== */
 @media (min-width: 769px) and (max-width: 1199px) {

     /* 仅针对平板端 (如 iPad 各种型号) 的回忆卡片和时光轴卡片 */
     .moment-card .tag-capsule,
     #memory-panel.timeline-mode .moment-card .tag-capsule {
         font-size: 11px !important;
         /* 字体从 15px 缩小回精致的 11px */
         padding: 3px 8px !important;
         /* 压缩胶囊内部的上下左右留白 */
         border-width: 1px !important;
         /* 边框调细，减轻视觉厚重感 */
         margin-right: 5px !important;
         /* 减小多个胶囊并排时的间距 */
         margin-bottom: 5px !important;
     }
 }

 /* ==========================================================================
【UI 微调】收紧详情页顶部留白，提升视觉饱满度
========================================================================== */

 /* 1. 全局缩减内容区顶部内边距 */
 #detail-content {
     padding-top: 40px !important;
     /* 从原本臃肿的 85px/60px 直接降回清爽的 40px */
 }

 /* 2. 移除为了避让叉号而做的文字右侧强行缩进 */
 @media (max-width: 768px) {
     #detail-content-title {
         padding-right: 0 !important;
         /* 手机端释放标题右侧空间 */
     }
 }

 @media (min-width: 769px) {
     #detail-content-title {
         padding-right: 0 !important;
         /* 电脑端同步释放 */
     }
 }

 /* ==========================================================================
【iPad / 平板专属优化】缩减“回忆详情”弹窗内部的标签胶囊尺寸
========================================================================== */
 @media (min-width: 769px) and (max-width: 1199px) {

     /* 缩小详情弹窗里的标签尺寸 */
     #detail-content .tag-capsule {
         font-size: 12px !important;
         /* 字体从 14px 缩小到精致的 12px */
         padding: 6px 14px !important;
         /* 压缩上下左右的内边距 */
         border-width: 1.5px !important;
         /* 保持清晰的边框厚度 */
         margin-right: 6px !important;
         /* 减小标签之间的间距 */
         margin-bottom: 6px !important;
     }
 }

 /* ==========================================================================
【手机端细节极限优化】沉底对齐穿插、迷你标签、叉号避让
========================================================================== */
 @media (max-width: 768px) {

     /* 1. ✅ 核心魔法 1：改变外层遮罩的引力，把卡片往屏幕底部吸附 */
     #detail-overlay {
         align-items: flex-end !important;
         /* 放弃居中，让内部卡片沉到底部 */
     }

     /* 2. ✅ 核心魔法 2：把卡片垫高，刚好卡在底部图标的中间 */
     #detail-overlay .modal-content-box {
         width: 90% !important;
         /* 保持左右留白 */
         height: 85vh !important;
         /* 固定卡片的高度，让它每次打开都一样长 */
         max-height: 85vh !important;

         /* 这里的 50px 就是卡片底边距离屏幕底部的绝对距离。
        因为悬浮图标大概也在这个高度，它能 100% 精准切过图标正中心！
        (觉得高了就改成 40px，低了就改成 60px) */
         margin-bottom: 50px !important;
         margin-top: 0 !important;
         /* 清除原有居中边距 */

         display: flex !important;
         flex-direction: column !important;
     }

     /* 3. 详情内容区：给内部的文字留出安全区 */
     #detail-content {
         max-height: none !important;
         height: 100% !important;
         flex: 1 !important;
         padding-bottom: 45px !important;
         /* 内部留白，防止文字贴到底边 */
         padding-top: 30px !important;
         padding-left: 20px !important;
         padding-right: 20px !important;
     }

     /* 4. 详情里的标签：迷你胶囊 */
     #detail-content .tag-capsule {
         font-size: 11px !important;
         padding: 4px 10px !important;
         border-width: 1px !important;
         margin-right: 5px !important;
         margin-bottom: 5px !important;
     }

     /* 5. 叉号位置：极限推向右上角 */
     #detail-overlay .close-modal {
         top: 8px !important;
         right: 8px !important;
         width: 34px !important;
         height: 34px !important;
         font-size: 18px !important;
     }
 }

 /* ==========================================================================
【那年今日】时钟信封 UI & 呼吸动效
========================================================================== */
 #on-this-day-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     /* 放在右上角，和左边的同步状态对称 */
     z-index: 500;
     background: #fff;
     border: 2px solid #1a1a1a;
     border-radius: 30px;
     padding: 8px 16px 8px 12px;
     display: none;
     /* 默认隐藏，只有遇到纪念日才用 JS 改为 flex */
     align-items: center;
     gap: 8px;
     cursor: pointer;
     box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
     transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     /* 引入柔和的悬浮呼吸动画，吸引用户点击 */
     /* otdFloat 动画已移除，持续运行会使手机发热 */
 }

 #on-this-day-btn:hover {
     transform: translateY(-2px) scale(1.05);
     box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
     background: #fafafa;
 }

 #on-this-day-btn .otd-text {
     font-family: 'Inter', "PingFang SC", sans-serif;
     font-size: 13px;
     font-weight: 900;
     color: #1a1a1a;
     letter-spacing: 0.5px;
 }

 @keyframes otdFloat {
     0% {
         transform: translateY(0);
     }

     100% {
         transform: translateY(-5px);
     }
 }

 /* 手机端稍微调整一下位置，防止遮挡 */
 @media (max-width: 768px) {
     #on-this-day-btn {
         top: 15px;
         right: 15px;
         padding: 6px 12px 6px 8px;
     }

     #on-this-day-btn .otd-text {
         font-size: 12px;
     }
 }

 /* ==========================================================================
【界面净化】隐藏旧版云端控件 & 优化新版控件
========================================================================== */

 /* 1. 彻底隐藏左上角像牛皮癣一样的旧同步控件 */

 /* 2. 给新集成的云端按钮添加交互微动效 */

 /* ==========================================================================
【UI 微调】解决云端同步按钮与关闭叉号重叠的问题
========================================================================== */

 /* ==========================================================================
【层级修复】确保云端同步设置弹窗永远处于最顶层
========================================================================== */
 #sync-settings-overlay {
     z-index: 3500 !important;
     /* 强制超越普通的 3000 层级，防止被其他弹窗遮挡 */
 }

 /* ==========================================================================
【云端状态灯】黄灯加载呼吸动画
========================================================================== */
 @keyframes pulse-yellow {
     0% {
         transform: scale(0.95);
         box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7);
     }

     70% {
         transform: scale(1);
         box-shadow: 0 0 0 6px rgba(241, 196, 15, 0);
     }

     100% {
         transform: scale(0.95);
         box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
     }
 }

 /* ==========================================================================
【专属优化】国家概览（城市列表）中的图片强制正方形统一排版
========================================================================== */
 .city-overview-card img {
     width: 100% !important;
     height: auto !important;
     /* 重置高度，交给比例控制 */
     aspect-ratio: 1 / 1 !important;
     /* ✅ 核心魔法：强制 1:1 正方形 */
     object-fit: cover !important;
     /* ✅ 核心魔法：居中裁剪，填满正方形且不拉伸变形 */
     object-position: center !important;
     /* 确保取图片的绝对正中心 */

     border-radius: 12px !important;
     /* 保持优雅的内部圆角 */
     margin-bottom: 12px !important;
     /* 保持和下方文字的间距 */
     display: block !important;
 }

 /* ==========================================================================
【UI 清理】彻底隐藏点击地图国家后顶部出现的“国家名悬浮胶囊”
========================================================================== */
 #country-floating-capsule {
     display: none !important;
 }

 /* ==========================================================================
【终极流畅度优化】加快侧边栏与地图的挤压变形速度，消除飞行动画冲突
========================================================================== */
 #chartdiv {
     /* 统一使用 GPU 加速的平滑曲线，避免布局计算抖动 */
     transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
     will-change: width !important;
 }

 #memory-panel {
     transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s !important;
     will-change: width !important;
 }

 /* ==========================================================================
【云端按钮重构】移回首页左上角并保持精美气泡样式
========================================================================== */
 #home-sync-btn {
     position: absolute;
     top: 20px;
     left: 20px;
     z-index: 500;
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     padding: 8px 14px;
     background: #f5f5f5;
     /* 保持你截图里的浅灰底色 */
     border: 2px solid transparent;
     border-radius: 50px;
     transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 /* 鼠标悬停时，优雅地上浮并浮现黑框 */
 #home-sync-btn:hover {
     background: #fff;
     border-color: #1a1a1a;
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 /* 确保三色指示灯的大小正常 */
 #archive-sync-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #ccc;
     display: inline-block;
 }

 /* 魔法交互：当你点开侧边栏面板(进入专注模式)时，左上角的云朵自动隐藏，不抢视觉重心 */
 body.mode-focus #home-sync-btn {
     opacity: 0;
     pointer-events: none;
     transform: translateY(-10px);
 }

 /* 手机端微调，避开安全区 */
 @media (max-width: 768px) {
     #home-sync-btn {
         top: 15px;
         left: 15px;
         padding: 6px 12px;
     }
 }

 /* ==========================================================================
【国家城市网格】专用 city-grid-mode 类，仅在城市标签下启用，不影响回忆瀑布流
电脑端 3 列 / 手机端 2 列，grid-auto-flow: row 保证先横后竖排列
========================================================================== */

 /* 电脑端：3列，先横后竖 */
 @media (min-width: 769px) {
     .city-grid-mode {
         display: grid !important;
         grid-template-columns: repeat(3, 1fr) !important;
         grid-auto-flow: row !important;
         /* 先填满一行，再换下一行 */
         gap: 24px !important;
         column-count: unset !important;
         /* 彻底关闭 CSS columns */
         column-gap: 0 !important;
         padding: 30px 40px 60px 40px !important;
         box-sizing: border-box !important;
     }
 }

 /* 手机端：2列，先横后竖 */
 @media (max-width: 768px) {
     .city-grid-mode {
         display: grid !important;
         grid-template-columns: repeat(2, 1fr) !important;
         grid-auto-flow: row !important;
         /* 先填满一行，再换下一行 */
         gap: 15px !important;
         column-count: unset !important;
         /* 彻底关闭 CSS columns */
         column-gap: 0 !important;
         padding: 15px 15px 130px 15px !important;
         box-sizing: border-box !important;
     }
 }

 /* 城市卡片在网格中铺满单元格，不留边距 */
 .city-grid-mode .city-overview-card {
     width: 100% !important;
     margin-bottom: 0 !important;
     display: flex !important;
     flex-direction: column !important;
     box-sizing: border-box !important;
 }

 .city-grid-mode .city-overview-card img {
     aspect-ratio: 1 / 1 !important;
     object-fit: cover !important;
 }