/* ==========================================================================
   觅知爱电影 MizhiADY - PWA 增强样式
   1) iOS / 安卓「独立模式」下的安全区适配（刘海、底部 Home 指示条）
   2) 添加到桌面引导弹层 + 新版本更新条
   3) 独立模式下的小改动（去掉多余的息屏抖动、隐藏浏览器专属元素）
   依赖主题已有的 CSS 变量：--basic-bg / --font-color / --font-color-6 / --theme-color
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 独立模式（display-mode: standalone）安全区
   -------------------------------------------------------------------------- */

/* 底部为 Home 指示条留出空间，避免手机端导航被遮住 */
html.is-standalone .mzadywapdbfoot {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
}

html.is-standalone .site-footer {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

html.is-standalone .side-top {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* 播放页底部工具条同样避开指示条 */
html.is-standalone .player-foot,
html.is-standalone .m_player_foot {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
}

/* 横屏时左右两侧也留出安全区 */
@media (orientation: landscape) {
    html.is-standalone body {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* 后台把状态栏样式设成 black-translucent 时，页面会顶到刘海下面：
   顶部整体下移一个状态栏高度，首页/分类页（顶部无留白）只补安全区即可 */
html.pwa-underlap header {
    top: env(safe-area-inset-top, 0px);
}

html.pwa-underlap body {
    padding-top: calc(69px + env(safe-area-inset-top, 0px));
}

html.pwa-underlap body#index,
html.pwa-underlap body.type {
    padding-top: env(safe-area-inset-top, 0px);
}

/* iOS 独立模式下点击不会触发 :active 反馈，这里补一个轻触反馈 */
html.is-standalone .mzadywapdbfoot .item:active,
html.is-standalone .nav:active,
html.is-standalone .tab_item:active {
    opacity: .72;
}

/* --------------------------------------------------------------------------
   2. 添加到桌面引导 / 更新提示
   -------------------------------------------------------------------------- */

.pwa-sheet {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pwa-sheet[hidden] {
    display: none !important;
}

.pwa-sheet__mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .24s ease;
}

.pwa-sheet.is-open .pwa-sheet__mask {
    opacity: 1;
}

.pwa-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 20px 18px 16px;
    border-radius: 20px;
    background: var(--basic-bg, #191919);
    color: var(--font-color, #fff);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .45);
    transform: translateY(14px) scale(.985);
    opacity: 0;
    transition: transform .28s cubic-bezier(.2, .9, .2, 1), opacity .22s ease;
}

.pwa-sheet.is-open .pwa-sheet__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.pwa-sheet__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 34px;
}

.pwa-sheet__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex: 0 0 auto;
    object-fit: cover;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .8);
    background: rgba(255, 255, 255, .08);
}

.pwa-sheet__title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.35;
}

.pwa-sheet__desc {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--font-color-6, rgba(255, 255, 255, .6));
}

.pwa-sheet__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--input-bg, rgba(255, 255, 255, .08));
    color: var(--font-color-6, rgba(255, 255, 255, .6));
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-steps {
    list-style: none;
    margin: 16px 0 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--input-bg, rgba(255, 255, 255, .06));
    font-size: 13px;
    line-height: 1.75;
}

.pwa-steps[hidden] {
    display: none !important;
}

.pwa-steps li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--font-color-6, rgba(255, 255, 255, .7));
}

.pwa-steps li + li {
    margin-top: 7px;
}

.pwa-steps b {
    color: var(--font-color, #fff);
    font-weight: 600;
}

.pwa-steps__n {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--theme-color, #2862e5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Safari 分享按钮图标提示 */
.pwa-steps__share {
    display: inline-block;
    width: 15px;
    height: 17px;
    vertical-align: -3px;
    margin: 0 2px;
}

.pwa-steps__share svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--theme-color, #2862e5);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pwa-sheet__actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.pwa-btn {
    flex: 1;
    appearance: none;
    border: 0;
    border-radius: 13px;
    padding: 13px 14px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--font-color, #fff);
    background: var(--input-bg, rgba(255, 255, 255, .08));
    cursor: pointer;
    transition: transform .14s ease, opacity .14s ease;
}

.pwa-btn:active {
    transform: scale(.975);
    opacity: .88;
}

.pwa-btn--primary {
    color: #fff;
    background: var(--theme-color, #2862e5);
    box-shadow: 0 10px 22px -14px var(--theme-color, #2862e5);
}

/* 按平台切换步骤说明：ios / inapp / install */
.pwa-sheet .pwa-steps[data-platform="ios"],
.pwa-sheet .pwa-steps[data-platform="other"] {
    display: none;
}

.pwa-sheet[data-mode="ios"] .pwa-steps[data-platform="ios"] {
    display: block;
}

.pwa-sheet[data-mode="inapp"] .pwa-steps[data-platform="other"],
.pwa-sheet[data-mode="android"] .pwa-steps[data-platform="other"] {
    display: block;
}

/* 「立即安装」按钮只在 Chromium 给出 beforeinstallprompt 时出现 */
.pwa-sheet .pwa-btn[data-action="install"] {
    display: none;
    flex: 1.25;
}

.pwa-sheet[data-mode="install"] .pwa-btn[data-action="install"] {
    display: block;
}

/* 电脑端：底部横条弹窗——离底边留出距离，介绍信息与按钮同一行 */
@media (min-width: 900px) {
    .pwa-sheet,
    .pwa-sheet.is-desktop {
        align-items: flex-end;
        justify-content: center;
    }

    .pwa-sheet.is-desktop .pwa-sheet__mask {
        background: linear-gradient(to top,
            rgba(0, 0, 0, .46) 0%,
            rgba(0, 0, 0, .18) 38%,
            rgba(0, 0, 0, 0) 72%);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .pwa-sheet.is-desktop .pwa-sheet__panel {
        display: flex;
        align-items: center;
        gap: 16px;
        width: auto;
        max-width: min(780px, calc(100vw - 64px));
        /* 距最底部保留一段距离 */
        margin: 0 0 calc(48px + env(safe-area-inset-bottom, 0px));
        padding: 14px 16px 14px 18px;
        border-radius: 14px;
        transform: translateY(18px) scale(.99);
        box-shadow: 0 24px 60px -26px rgba(0, 0, 0, .72);
    }

    .pwa-sheet.is-desktop.is-open .pwa-sheet__panel {
        transform: translateY(0) scale(1);
    }

    /* 左侧：图标 + 标题 + 说明，占满剩余宽度 */
    .pwa-sheet.is-desktop .pwa-sheet__head {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 0;
        gap: 12px;
    }

    .pwa-sheet.is-desktop .pwa-sheet__icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    .pwa-sheet.is-desktop .pwa-sheet__title {
        font-size: 14.5px;
        white-space: nowrap;
    }

    .pwa-sheet.is-desktop .pwa-sheet__desc {
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 电脑端不需要分步说明，信息全压在同一行 */
    .pwa-sheet.is-desktop .pwa-steps {
        display: none !important;
    }

    /* 右侧：按钮组 + 关闭 */
    .pwa-sheet.is-desktop .pwa-sheet__actions {
        flex: 0 0 auto;
        margin: 0;
        gap: 8px;
    }

    .pwa-sheet.is-desktop .pwa-btn {
        flex: 0 0 auto;
        padding: 9px 16px;
        font-size: 13px;
        border-radius: 10px;
    }

    .pwa-sheet.is-desktop .pwa-btn--primary {
        min-width: 96px;
    }

    .pwa-sheet.is-desktop .pwa-sheet__close {
        position: static;
        order: 3;
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        margin-left: 2px;
        background: transparent;
    }
}

/* -------------------------------------------------- 新版本更新条 */

.pwa-update {
    position: fixed;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 12px);
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 28px);
    padding: 9px 10px 9px 16px;
    border-radius: 999px;
    background: var(--basic-bg, #191919);
    color: var(--font-color, #fff);
    border: 1px solid var(--top-bg, rgba(255, 255, 255, .12));
    box-shadow: 0 14px 32px -16px rgba(0, 0, 0, .8);
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease, transform .24s ease;
}

.pwa-update.is-open {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.pwa-update[hidden] {
    display: none !important;
}

.pwa-update__text {
    white-space: nowrap;
    color: var(--font-color-6, rgba(255, 255, 255, .72));
}

.pwa-update__btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--theme-color, #2862e5);
    cursor: pointer;
    white-space: nowrap;
}

.pwa-update__close {
    appearance: none;
    border: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    color: var(--font-color-6, rgba(255, 255, 255, .6));
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

/* 桌面端把更新条挪到右下角 */
@media (min-width: 900px) {
    .pwa-update {
        left: auto;
        right: 22px;
        bottom: 22px;
        transform: translateY(12px);
    }

    .pwa-update.is-open {
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   3. 独立模式细节优化
   -------------------------------------------------------------------------- */

/* 独立模式下没有地址栏，滚动时隐藏搜索栏更省空间 */
html.is-standalone .myui-header__top {
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
}

/* 防止 iOS 独立模式长按图片弹出系统菜单（站点本身已禁右键） */
html.is-standalone img {
    -webkit-touch-callout: none;
}

/* 减弱 iOS 独立模式下的页面回弹 */
html.is-standalone body {
    overscroll-behavior-y: none;
}

@media (prefers-reduced-motion: reduce) {
    .pwa-sheet__mask,
    .pwa-sheet__panel,
    .pwa-update {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   4. PWA 启动页（可放广告 · 倒计时跳过）
   与静态启动图 apple-splash-*.jpg 共用同一套渐变与 40% 定位，
   所以从系统启动图切到这一层时不会跳变。
   -------------------------------------------------------------------------- */

.pwa-launch {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: linear-gradient(180deg, #1b1b22 0%, #0a0a0d 100%);
    opacity: 1;
    transition: opacity .3s ease;
    -webkit-tap-highlight-color: transparent;
}

.pwa-launch[hidden] {
    display: none !important;
}

.pwa-launch.is-leaving {
    opacity: 0;
    pointer-events: none;
}

/* 品牌橙光晕，和启动图同一位置 */
.pwa-launch__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(56% 40% at 50% 40%,
        rgba(255, 54, 0, .22) 0%,
        rgba(255, 54, 0, .07) 46%,
        rgba(255, 54, 0, 0) 72%);
}

/* 自定义启动图：整屏 cover，替换渐变层 */
.pwa-launch__splash {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* logo 位置：垂直 40%，与 apple-splash-*.jpg 里的「圆角 logo 卡」完全对齐 */
.pwa-launch__brand {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: min(44%, 200px);
    text-align: center;
    transition: opacity .28s ease;
}

.pwa-launch__tile {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 22%;
    box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .85);
}

/* 满铺广告就绪后，品牌层让位（底部品牌条会继续露出品牌） */
.pwa-launch.has-ad .pwa-launch__brand {
    opacity: 0;
}

/* 满铺广告：整屏 cover，图片就绪后淡入 */
.pwa-launch__ad {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background: transparent;
    opacity: 0;
    transition: opacity .35s ease;
}

.pwa-launch.has-ad .pwa-launch__ad {
    opacity: 1;
}

.pwa-launch__ad img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 图片挂了：广告层和品牌条一起隐藏，退回品牌启动页 */
.pwa-launch.ad-failed .pwa-launch__ad,
.pwa-launch.ad-failed .pwa-launch__badge {
    display: none;
}

/* 底部品牌条：logo + 应用名 + 广告标识 */
.pwa-launch__badge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 26px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 52%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.pwa-launch.has-ad .pwa-launch__badge {
    opacity: 1;
}

.pwa-launch__badge-logo {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    object-fit: contain;
    background: rgba(255, 255, 255, .1);
}

.pwa-launch__badge-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-launch__badge-tag {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .18);
}

/* 跳过按钮：右上角，倒计时数字用等宽数字避免抖动 */
.pwa-launch__skip {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(0, 0, 0, .34);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.pwa-launch__skip b {
    display: inline-block;
    min-width: 15px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.pwa-launch__skip:active {
    background: rgba(255, 255, 255, .22);
}

/* 启动页显示期间锁住滚动，避免背后页面跟着动 */
html.pwa-launching,
html.pwa-launching body {
    overflow: hidden !important;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .pwa-launch,
    .pwa-launch__ad {
        transition: none !important;
        animation: none !important;
    }
}