/* ============================================================
   Ice Card 手机 App 外壳 v7.5.0（批次② 板块 C+D）
   - 板块 C：手机固定毛玻璃页眉（汉堡 / 品牌 / 客服耳机）
   - 板块 D：手机底部固定三 Tab（Home / 凸起 Sell / Help）
   断点 921px 跟随 Astra 移动断点；桌面端仅注入页眉耳机钮。
   ============================================================ */

/* ===== 默认（桌面/非外壳页）：手机外壳全部不渲染占位 ===== */
#icecard-mobile-header,
#icecard-mobile-tabbar,
#icecard-help-overlay,
#icecard-menu-overlay {
    display: none;
}

/* ===== 通用圆形图标钮（页眉汉堡 / 耳机共用） ===== */
/* v7.5.1：Astra 全局按钮色 --ast-global-color-7=#ffcd57（橙黄），且 button:hover/:focus
   选择器特异性(0,1,1)高于单类名，触屏点按会残留橙黄胶囊底色；这里连同各状态一起重置干净 */
.icm-icon-btn,
.icm-support-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .78);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, transform .1s;
}
.icm-icon-btn:hover,
.icm-icon-btn:active,
.icm-icon-btn:focus,
.icm-support-btn:hover,
.icm-support-btn:active,
.icm-support-btn:focus {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(15, 23, 42, .08);
    outline: none;
    box-shadow: none;
}
.icm-icon-btn:active,
.icm-support-btn:active { transform: scale(.94); }
.icm-icon-btn svg,
.icm-support-btn .icm-btn-icon,
.icm-support-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* 耳机钮在线状态灯（右下 8px，白圈描边） */
.icm-online-dot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}
.icm-online-dot.is-online { background: #10b981; }

/* 未读红点（右上，收到客服消息且聊天窗关闭时由 JS 显示） */
.icm-unread {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 9px;
    height: 9px;
    padding: 0 2px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 2px #fff;
    font-size: 0;
    line-height: 9px;
    pointer-events: none;
}

/* ===== 桌面端耳机钮：默认不显示，JS 移入 Astra 页眉右侧后在宽屏显示 ===== */
#icecard-desktop-support {
    display: none;
}
@media (min-width: 922px) {
    #icecard-desktop-support {
        display: inline-flex;
        width: 40px;
        height: 40px;
        margin-left: 14px;
        background: #f0f9ff;
        border-color: #bae6fd;
        color: #0369a1;
    }
    #icecard-desktop-support:hover { background: #e0f2fe; }
}

/* ============================================================
   手机端（≤921px）：v7.5.1 起 App 外壳全站接管（首页/Sell/内页均显示）
   ============================================================ */
@media (max-width: 921px) {

    /* v7.5.1：手机外壳全站接管（不再限 sellpage 页），统一隐藏 Astra 自带页眉
       （透明悬浮、z-99；内页则是文档流静态页眉），由 App 页眉接管 */
    #masthead,
    header.site-header {
        display: none !important;
    }
    /* v7.5.1：iOS WKWebView（iOS Edge/无痕同引擎）惯性滚动时，html/body 上的
       overflow-x:hidden（Astra 主题全局 + sellpage 旧规则）会让 position:fixed
       页眉/Tab 被滚动内容盖住、漂移。把横向溢出裁剪挪到 #page 包裹层（外壳 DOM 在
       #page 之外、是 body 直接子节点），body 保持 visible，fixed 才始终相对视口。 */
    html, body {
        overflow-x: visible !important;
    }
    #page {
        overflow-x: hidden; /* 旧引擎兜底 */
        overflow-x: clip;   /* 不创建滚动容器，避免嵌套滚动容器影响惯性流畅度 */
        max-width: 100%;
    }

    /* v7.5.1：固定外壳强制独立合成层，惯性滚动中稳定盖在内容之上。
       只用 translateZ 提升合成，不用 will-change，减少常驻显存占用 */
    #icecard-mobile-header.icm-header,
    #icecard-mobile-tabbar.icm-tabbar,
    #icecard-help-overlay.icm-help-overlay,
    #icecard-menu-overlay.icm-menu-overlay {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* 内页（非 sellpage）Astra 页眉原本在文档流占位，隐藏后给内容补顶部避让；
       首页/Sell 页仍走 style.css 的 --isp-header-h 实测变量，不在此列 */
    body:not(.icecard-has-sellpage) .site-content {
        padding-top: calc(48px + env(safe-area-inset-top, 0px) + 10px) !important;
    }

    /* ---- 板块 C：固定毛玻璃页眉 ---- */
    #icecard-mobile-header.icm-header {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: calc(48px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 12px 0;
        /* v7.5.1：手机端固定栏用纯白实色，不用 backdrop-filter——毛玻璃每帧重新采样
           模糊，iOS WKWebView 惯性滚动时两条固定栏同时重算会明显掉帧（CEO 实测卡顿） */
        background: #ffffff;
        border-bottom: 1px solid rgba(15, 23, 42, .08);
        transition: background .2s ease, border-color .2s ease;
        box-sizing: border-box;
    }
    /* 滚动后：保持纯白（v7.5.1 起手机端固定栏统一实色，不做毛玻璃） */
    #icecard-mobile-header.icm-header.is-scrolled {
        background: #ffffff;
        border-bottom-color: rgba(15, 23, 42, .08);
    }
    /* 登录态真机预览时让开 WP 管理条（访客无此条，不受影响） */
    body.admin-bar #icecard-mobile-header.icm-header { top: 46px; }

    .icm-brand {
        flex: 1;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center; /* v7.5.3：logo 在汉堡与耳机钮之间真正水平居中 */
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .icm-brand-logo {
        /* v7.5.3：34→40px。原图上下各有约 18% 透明留白，40px 时冰块/字标的
           可见高度才与两侧 36px 圆钮视觉平衡；宽约 120px，不挤 */
        height: 40px;
        width: auto;
        max-width: 200px;
        display: block;
    }
    .icm-brand-text {
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.3px;
        color: #0369a1;
        white-space: nowrap;
    }
    .icm-header-spacer { width: 36px; flex: 0 0 auto; }

    /* ---- 板块 D：底部固定三 Tab ---- */
    #icecard-mobile-tabbar.icm-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* v7.5.1：纯白实色，不用 backdrop-filter（惯性滚动每帧重算模糊导致掉帧） */
        background: #ffffff;
        border-top: 1px solid rgba(15, 23, 42, .08);
        box-sizing: border-box;
    }
    .icm-tab {
        flex: 1;
        border: 0;
        background: transparent;
        padding: 6px 0 4px;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: #94a3b8;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 0;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s;
    }
    /* v7.5.1：压住 Astra 橙黄全局按钮色在 hover/focus/active 态的渗漏 */
    .icm-tab:hover,
    .icm-tab:active,
    .icm-tab:focus,
    .icm-tab:focus-visible {
        background: transparent;
        border: 0;
        outline: none;
        box-shadow: none;
    }
    .icm-tab-ic { display: flex; flex: 0 0 auto; }
    .icm-tab-ic svg { width: 23px; height: 23px; display: block; }
    .icm-tab-tx { font-size: 11px; font-weight: 600; line-height: 1.2; }
    .icm-tab.is-active { color: #0284c7; }
    .icm-tab.is-active:hover,
    .icm-tab.is-active:active,
    .icm-tab.is-active:focus { background: transparent; color: #0284c7; }

    /* 中间凸起 Sell 钮：品牌蓝渐变正圆，无激活态（它是动作钮） */
    .icm-tab-sell { color: #94a3b8; position: relative; }
    .icm-sell-circle {
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -18px;
        border: 4px solid #fff;
        box-shadow: 0 6px 16px rgba(2, 132, 199, .35);
        transition: transform .1s;
        box-sizing: border-box;
    }
    .icm-sell-circle svg { width: 24px; height: 24px; }
    .icm-tab-sell:active .icm-sell-circle { transform: scale(.94); }
    .icm-tab-sell .icm-tab-tx { margin-top: 1px; }

    /* ---- 内容避让：选卡清单 / 页脚不被 Tab 栏盖住（v7.5.1 起全站手机页） ---- */
    body.icecard-has-sellpage .isp-sidebar {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .site-content {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #colophon,
    footer.site-footer {
        margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* ---- v7.5.1：核价全屏视图②打开时，彻底藏掉选卡清单与底部 Tab ----
       iOS Safari 弹键盘时 fixed 元素会按可视视口收缩，单靠 .isp-main 白屏盖不住
       会露出下方清单（真机 22.png 实测）；display:none 双保险，返回时 class 移除即恢复 */
    body.isp-main-open .isp-sidebar {
        display: none !important;
    }
    body.isp-main-open #icecard-mobile-tabbar {
        display: none !important;
    }
    body.isp-main-open {
        background: #fff;
    }

    /* ---- 拍板⑤：首页底部蓝色 CTA 卡与 Sell Tab 重复，手机端整卡隐藏（桌面保留） ---- */
    body.icecard-has-sellpage .icecard-cta-wrap {
        display: none !important;
    }

    /* ---- Help 底部抽屉（复用客服 Action Sheet 视觉语言） ---- */
    #icecard-help-overlay.icm-help-overlay {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(15, 23, 42, .5);
        padding: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s;
    }
    #icecard-help-overlay.icm-show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .icm-help-sheet {
        width: 100%;
        background: #fff;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -10px 40px rgba(15, 23, 42, .25);
        padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: #1e293b;
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
        max-height: 86vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    #icecard-help-overlay.icm-show .icm-help-sheet { transform: translateY(0); }
    .icm-help-handle {
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #cbd5e1;
        margin: 4px auto 10px;
    }
    .icm-help-title {
        margin: 0 0 14px;
        text-align: center;
        font-size: 17px;
        font-weight: 700;
    }
    .icm-help-steps {
        list-style: none;
        margin: 0 0 16px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .icm-help-step {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 12px 14px;
    }
    .icm-step-n {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #e0f2fe;
        color: #0284c7;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .icm-step-t { font-size: 14px; line-height: 1.45; font-weight: 500; }
    .icm-help-ok {
        width: 100%;
        border: 0;
        border-radius: 12px;
        padding: 14px;
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
    /* v7.5.1：按压态保持品牌蓝渐变，不被 Astra 橙黄按钮色覆盖 */
    .icm-help-ok:hover,
    .icm-help-ok:active,
    .icm-help-ok:focus {
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
        color: #fff;
        outline: none;
        box-shadow: none;
        opacity: .92;
    }

    /* ============================================================
       v7.5.2：汉堡菜单底部抽屉（视觉语言与 Help 抽屉一致，纯白实色）
       ============================================================ */
    #icecard-menu-overlay.icm-menu-overlay {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(15, 23, 42, .5);
        padding: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s;
    }
    #icecard-menu-overlay.icm-show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .icm-menu-sheet {
        width: 100%;
        background: #fff;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -10px 40px rgba(15, 23, 42, .25);
        padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px));
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: #1e293b;
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
        max-height: 86vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    #icecard-menu-overlay.icm-show .icm-menu-sheet { transform: translateY(0); }
    .icm-menu-handle {
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #cbd5e1;
        margin: 4px auto 8px;
    }
    .icm-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .icm-menu-title {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
    }
    .icm-menu-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid rgba(15, 23, 42, .08);
        background: #fff;
        color: #64748b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
    .icm-menu-close svg { width: 17px; height: 17px; display: block; }
    .icm-menu-close:active { transform: scale(.94); }

    .icm-menu-list {
        list-style: none;
        margin: 0 0 12px;
        padding: 0;
        border-top: 1px solid #eef2f7;
    }
    .icm-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 4px;
        border-bottom: 1px solid #eef2f7;
        text-decoration: none;
        color: #1e293b;
        font-size: 15px;
        font-weight: 600;
        -webkit-tap-highlight-color: transparent;
    }
    .icm-menu-link:active { background: #f8fafc; }
    .icm-menu-link.is-current { color: #0284c7; }
    .icm-menu-arrow {
        flex: 0 0 auto;
        color: #94a3b8;
        display: inline-flex;
    }
    .icm-menu-arrow svg { width: 18px; height: 18px; display: block; }

    /* 菜单底部客服行：复用 .icm-support-btn 的在线灯/未读红点绑定，覆盖圆钮布局为整行按钮 */
    .icm-menu-support.icm-support-btn {
        width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid #bae6fd;
        background: #f0f9ff;
        color: #0369a1;
        padding: 13px 16px;
        gap: 10px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        justify-content: flex-start;
    }
    .icm-menu-support .icm-btn-icon {
        width: 22px;
        height: 22px;
        display: inline-flex;
        flex: 0 0 auto;
    }
    .icm-menu-support .icm-btn-icon svg { width: 22px; height: 22px; }
    .icm-menu-support-tx { flex: 1; text-align: left; }
    .icm-menu-support .icm-online-dot {
        position: static;
        margin-left: auto;
    }
    .icm-menu-support .icm-unread { display: none; }
}

/* 宽屏下 Help 若被触发（理论上 Tab 隐藏不会），居中弹窗兜底 */
@media (min-width: 922px) {
    #icecard-help-overlay.icm-help-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(15, 23, 42, .55);
        padding: 20px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s;
    }
    #icecard-help-overlay.icm-show { opacity: 1; visibility: visible; pointer-events: auto; }
    .icm-help-sheet {
        width: 100%;
        max-width: 420px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
        padding: 18px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: #1e293b;
        transform: translateY(16px) scale(.98);
        opacity: 0;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
        box-sizing: border-box;
    }
    #icecard-help-overlay.icm-show .icm-help-sheet { transform: translateY(0) scale(1); opacity: 1; }
    .icm-help-handle { display: none; }
}

/* 宽屏下菜单抽屉若被触发（理论上页眉隐藏不会），居中弹窗兜底（v7.5.2） */
@media (min-width: 922px) {
    #icecard-menu-overlay.icm-menu-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(15, 23, 42, .55);
        padding: 20px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s;
    }
    #icecard-menu-overlay.icm-show { opacity: 1; visibility: visible; pointer-events: auto; }
    .icm-menu-sheet {
        width: 100%;
        max-width: 420px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
        padding: 18px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: #1e293b;
        transform: translateY(16px) scale(.98);
        opacity: 0;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
        box-sizing: border-box;
    }
    #icecard-menu-overlay.icm-show .icm-menu-sheet { transform: translateY(0) scale(1); opacity: 1; }
    .icm-menu-handle { display: none; }
}