/* 回忆地图 · 样式 — “那年今日”V5 补丁：底部贴边与对称的弹出/退出动画 */
/* ══════════════════════════════════════════════════════
   OTD V5：彻底重写，强力修复底部贴边 + 退出动画
   ══════════════════════════════════════════════════════ */

/* 1. 禁掉所有旧代码对 OTD 的 animation，完全由本补丁接管 */
#otd-overlay,
#otd-overlay.active,
#otd-overlay.overlay-closing,
#otd-overlay.otd-closing,
#otd-overlay .modal-content-box,
#otd-overlay.active .modal-content-box,
#otd-overlay.overlay-closing .modal-content-box,
#otd-overlay.otd-closing .modal-content-box {
    animation: none !important;
}

/* 2. OTD overlay 全局基础：
      - 始终 display:flex（不用 display:none，避免 transition 捕不到）
      - 用 visibility + pointer-events 控制显隐
*/
#otd-overlay {
    display: flex !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#otd-overlay.active {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* otd-closing 期间：保持可见让动画走完，但禁止交互 */
#otd-overlay.otd-closing {
    visibility: visible !important;
    pointer-events: none !important;
}

/* ═══════════════════════════
   手机端：底部抽屉样式
   核心修复：modal-content-box 改为 fixed 直接贴屏幕底部
   彻底消除悬空问题
═══════════════════════════ */
@media (max-width: 768px) {

    /* 遮罩层：全屏透明背景，flex-end 对齐已无意义，改为普通容器 */
    #otd-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 20000 !important;
        /* 背景渐变：关闭延迟等动画结束 */
        transition: background 0.42s ease,
            visibility 0s linear 0.46s !important;
    }

    #otd-overlay.active {
        background: rgba(0, 0, 0, 0) !important;
        transition: visibility 0s linear 0s !important;
    }

    #otd-overlay.otd-closing {
        background: rgba(0, 0, 0, 0) !important;
        transition: visibility 0s linear 0.42s !important;
    }

    /* ★ 核心修复：modal-content-box 用 fixed + 精确贴底
       - position: fixed + bottom:0 确保永远贴到屏幕最底边，零悬空
       - 高度 = 全屏 - 顶部留出80px（露出背景），并加 safe-area 撑穿 Home Bar
       - overflow:hidden + border-radius 只在顶部圆角，底部直角贴边
    */
    #otd-overlay .modal-content-box {
        position: fixed !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        right: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        /* 高度：从底部0到离顶部80px的位置，再加safe-area确保穿透Home Bar */
        height: calc(100vh - 80px) !important;
        max-height: none !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        /* 初始/关闭态：向下平移整个自身高度+缓冲，藏到屏幕外 */
        transform: translateY(110%) !important;
        transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
        will-change: transform;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18) !important;
        /* 底部用 padding-bottom 撑穿 Home Bar，不影响面板高度 */
        padding-bottom: env(safe-area-inset-bottom) !important;
        box-sizing: border-box !important;
    }

    /* ★ 进入：滑上来贴底，translateY(0) = 完全显示，bottom:0 已贴边 */
    #otd-overlay.active .modal-content-box {
        transform: translateY(0) !important;
        transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* ★ 退出：向下滑走，与添加回忆动画完全一致 */
    #otd-overlay.otd-closing .modal-content-box {
        transform: translateY(110%) !important;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* 内容区：强制覆盖 openOnThisDayOverlay 写死的 padding-bottom:120px
       给底部留出 Home Bar 高度的 padding */
    #otd-overlay #otd-content {
        padding-bottom: calc(env(safe-area-inset-bottom) + 24px) !important;
    }
}

/* ═══════════════════════════
   桌面端：底部滑入，与添加回忆动效完全一致
═══════════════════════════ */
@media (min-width: 769px) {
    #otd-overlay {
        position: fixed !important;
        inset: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: rgba(0, 0, 0, 0) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 20000 !important;
        transition: visibility 0s linear 0.44s !important;
    }

    #otd-overlay.active {
        background: rgba(0, 0, 0, 0) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: visibility 0s linear 0s !important;
    }

    #otd-overlay.otd-closing {
        background: rgba(0, 0, 0, 0) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: visibility 0s linear 0.44s !important;
    }

    /* 弹窗本体：初始藏在屏幕下方，与添加回忆的 slide-up 完全一致 */
    #otd-overlay .modal-content-box {
        width: 92% !important;
        max-width: 1300px !important;
        height: 88vh !important;
        max-height: 900px !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
        /* 初始/关闭态：藏到屏幕下方 */
        transform: translateY(110%) !important;
        opacity: 0 !important;
        transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
            opacity 0.5s ease !important;
        will-change: transform, opacity;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ★ 进入：从底部滑上来 + 淡入，与添加回忆完全一致 */
    #otd-overlay.active .modal-content-box {
        transform: translateY(0) !important;
        opacity: 1 !important;
        transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
            opacity 0.5s ease !important;
    }

    /* ★ 退出：向下滑走 + 淡出，与添加回忆完全一致 */
    #otd-overlay.otd-closing .modal-content-box {
        transform: translateY(110%) !important;
        opacity: 0 !important;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
            opacity 0.4s ease !important;
    }
}

/* 卡片样式 */
#otd-overlay .otd-card-hover {
    padding: 12px !important;
    border-radius: 16px !important;
    margin-bottom: 0 !important;
}