/* ==================== 手机端底部玻璃导航 · 公共组件样式 ====================
   【由 Agent 完成】2026-10-10 从 sales_home.css 抽出，供全站组件 _mobile_tabbar.html 使用
   引入方式：组件模板自带 <link>，页面只需 {% include 'MatchFrront/_mobile_tabbar.html' %}
   【由 Agent 完成】2026-10-12 生效断点由 ≤768px 放宽到 ≤1180px（手机 + 平板）；≥1200px 电脑端不渲染
   —— 1180 这条线对齐左侧导航的断点：≤1199px 左侧导航默认收起、靠三条杠展开，
      正好是平板/小屏那一档；≥1200px 左侧导航常驻，不需要底部菜单。
   · 【改动断点时必须同步三处】改这里的 1180，必须同时改
       ① _mobile_tabbar.html 里的 MT_MAX_WIDTH（组件 JS 的滚动/到底判断）
       ② static/MatchFrront/js/nav_hide.js 里的宽度判断
     三处不一致会出现「平板上底栏显示了但不会随滚动收起」这类半截状态。
   ==================================================================== */

/* 【由 Agent 完成】图标字体兜底：组件用到 layui-icon，若所在页面没引 layui.css，
   这里保证字体仍能加载（URL 与 layui 同源，已引过的页面直接命中缓存，不会重复下载） */
@font-face {
    font-family: "layui-icon";
    src: url("/static/AdminManage/layui/font/iconfont.woff2") format("woff2"),
         url("/static/AdminManage/layui/font/iconfont.woff") format("woff"),
         url("/static/AdminManage/layui/font/iconfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.layui-icon { font-family: "layui-icon" !important; font-style: normal; }
.layui-icon-fire:before { content: "\e756"; }
.layui-icon-template-1:before { content: "\e656"; }
.layui-icon-read:before { content: "\e705"; }
.layui-icon-username:before { content: "\e66f"; }

/* ==================== 手机端底部玻璃导航（比赛 / 模型 / 推荐 / 我的） ====================
   【由 Agent 完成】2026-10-10
   · 半透明玻璃：backdrop-filter(blur + saturate)，iOS 26/27 Liquid Glass 同款观感；
     叠顶部高光渐变 + 内阴影描边，模拟玻璃厚度与边缘折射
   · position: fixed; bottom: 10px，常驻屏幕底端；宽 300px 居中（窄屏自动收窄）、高 51px
   · 文字/图标：未选中 #333、选中黑色 #000（图标 stroke:currentColor 跟随）
   · 下滑缩成 90×24 玻璃小框（框中「上滑出现菜单」，文字半透明 #333），上滑还原完整菜单
   · 与顶部导航同进同出：nav_hide.js 对 .site-nav 与 .mobile-tabbar 同步切 nav-hidden
   · 切换动效（水玻璃）：液态滑块弹性位移 + 水滴扩散高光 + 玻璃扫光
   ================================================================================== */
.mobile-tabbar { display: none; }

/* 【由 Agent 完成】2026-10-12 断点 768 → 1180：平板（iPad 竖 768 / 834 / 横 1024、安卓平板 800~1180）
   同样显示底部菜单。原来只到 768，iPad 竖屏勉强够、横屏（1024）就完全没有底部导航 */
@media (max-width: 1180px) {
    .mobile-tabbar {
        display: flex;
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        margin: 0 auto;          /* 左右 auto 居中 */
        /* 【由 Agent 完成】2026-10-10 宽度随「开启的栏目个数」自动增加：
           后台最多 5 个栏目，每栏约 65px —— 4 栏 260px（与原来一致）、5 栏 325px、3 栏 195px。
           --mt-cols 由组件模板按实际栏目数输出；窄屏由 max-width 兜底收窄。 */
        width: calc(var(--mt-cols, 4) * 65px);
        max-width: calc(100% - 24px);
        /* 【由 Agent 完成】2026-10-10 距底 10px + iPhone 底部安全区：
           页面开了 viewport-fit=cover，全面屏 iPhone 底部有约 34px 的 Home Indicator 手势区，
           写死 bottom:10px 会让底栏下半截陷进手势区（半透明玻璃被系统横条穿过），
           看起来像底栏「超出/陷进」了屏幕底边 —— 抬高到安全区之上。
           Android / 电脑端 env() 取 0，行为不变。占位 body padding-bottom 已含同样的 env()，两端对齐 */
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 1200;
        height: 51px;            /* 原 45px，+6px */
        padding: 4px 6px;
        border-radius: 26px;     /* 保持胶囊形：约等于高度的一半 */
        /* 【由 Agent 完成】2026-10-11 通透度上调：白色叠加层由 0.22/0.09 减到 0.12/0.045
           （约减半），底下的页面内容能明显透上来，不再是「一层白雾」 */
        border: 1px solid rgba(255, 255, 255, 0.34);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.045) 100%);
        /* 加大模糊与饱和（26px/190% → 32px/220%），并加 brightness 微提亮：
           模糊更重 = 更像真玻璃的折射，饱和更高 = 透上来的颜色更浓（Liquid Glass 观感） */
        -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(1.03);
        backdrop-filter: blur(32px) saturate(220%) brightness(1.03);
        /* 外阴影减轻（更透就不该压太重），内描边补一层 0.5px 细高光模拟玻璃边缘折射 */
        box-shadow: 0 4px 14px rgba(4, 10, 25, 0.14),
                    inset 0 1px 0 rgba(255, 255, 255, 0.50),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
                    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22);
        transition: width 0.36s cubic-bezier(0.34, 1.4, 0.64, 1),
                    height 0.36s cubic-bezier(0.34, 1.4, 0.64, 1),
                    padding 0.3s ease, background 0.3s ease,
                    border-color 0.3s ease, box-shadow 0.3s ease,
                    transform 0.3s ease, opacity 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }
    /* 【由 Agent 完成】2026-10-10 滚到页面最底部：底栏切换成「贴底通栏」——
       全宽铺满、贴住屏幕底边、只保留顶部圆角，与页面底部无缝相接（不再悬浮留缝）。
       由组件 JS 在滚动到底时加 mt-at-bottom，离底后再还原成胶囊。 */
    .mobile-tabbar.mt-at-bottom {
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;  /* 通栏态四角全直：与屏幕左右/底边齐平，不留圆角缺口 */
        height: 51px;     /* 通栏态与悬浮态等高（51），只把胶囊拉成全宽、贴住底边 */
    }

    /* 玻璃顶部高光（厚度感）；不挡点击
       【由 Agent 完成】2026-10-11 高光带收窄到 34%、峰值略提到 0.34：
       更窄更亮 = 像玻璃上沿的一道锐利反光，比原来一大片渐变更接近真实玻璃 */
    .mobile-tabbar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%,
                                            rgba(255, 255, 255, 0.06) 22%,
                                            rgba(255, 255, 255, 0) 34%);
    }
    /* 【由 Agent 完成】2026-10-11 玻璃下沿回光：真实玻璃底边会有一圈弱反光，
       只贴在底部 24% 内，配合上面的顶部高光形成「上下都有折射」的厚度感 */
    .mobile-tabbar::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 24%);
    }
    /* 【由 Agent 完成】2026-10-10 下滑时**不再移出屏幕**，而是缩成一个 90×24 的
       **同款玻璃小框**（渐变、模糊、饱和、阴影、顶部高光全部保留，与展开态一致），
       框中显示提示文案「上滑出现菜单」（#333 半透明 55%，与玻璃通透感一致）；上滑还原成完整菜单。
       （顶部导航仍是 translateY(-100%) 隐藏，两者由 nav_hide.js 同步切换） */
    .mobile-tabbar.nav-hidden {
        width: 90px;
        height: 24px;
        /* 收起态的小框浮起 10px（!important 盖住组件 JS 写在 style 上的 bottom）；
           var(--mt-gap) 由组件 JS 写入，是手机浏览器底部工具栏的遮挡补偿，保证不被工具栏压住 */
        bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--mt-gap, 0px)) !important;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: none;
        opacity: 1;
    }
    /* 【由 Agent 完成】2026-10-10 已经在页面最底部（通栏态）时再下滑收起：
       小框跟着通栏一起「全宽贴底」，不再浮在半空变成页中那个 90×24 悬浮小框，
       高度沿用收起态的 24px 细条，只保留顶部圆角，视觉上与通栏是同一块玻璃 */
    .mobile-tabbar.mt-at-bottom.nav-hidden {
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 18px 18px 0 0;
        height: 24px;
        bottom: calc(var(--mt-gap, 0px)) !important;
    }
    .mobile-tabbar.nav-hidden .mt-glider { display: none; }     /* 隐藏液态滑块 */
    .mobile-tabbar.nav-hidden .mt-item { display: none; }       /* 隐藏全部栏目 */
    /* 框中提示文案（仅下滑隐藏态出现） */
    .mobile-tabbar.nav-hidden .mt-hint {
        display: block;
        font-size: 10px;
        line-height: 1;
        /* 【由 Agent 完成】文字也做成半透明，跟玻璃框的通透感一致（#333 色相 + 55% 不透明度） */
        color: rgba(51, 51, 51, 0.55);
        white-space: nowrap;
        letter-spacing: 0.2px;
    }
    /* 展开态：提示文案不显示 */
    .mt-hint { display: none; }

    /* 【由 Agent 完成】2026-10-10 上滑还原（显示菜单）时**加快选中状态归位动画**：
       底栏 0.36s→0.18s、滑块 0.46s→0.20s、栏目 0.34s→0.16s；
       由 JS 在 nav-hidden 移除时临时加上 mt-fast，过渡结束后移除，平时的点击切换仍是原速 */
    .mobile-tabbar.mt-fast {
        transition: width 0.18s cubic-bezier(0.34, 1.25, 0.64, 1),
                    height 0.18s cubic-bezier(0.34, 1.25, 0.64, 1),
                    padding 0.18s ease, background 0.18s ease,
                    border-color 0.18s ease, box-shadow 0.18s ease,
                    transform 0.18s ease, opacity 0.18s ease;
    }
    .mobile-tabbar.mt-fast .mt-glider {
        transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1),
                    width 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
    }
    .mobile-tabbar.mt-fast .mt-item {
        transition: color 0.14s ease, transform 0.16s ease;
    }

    /* ---- 液态滑块：切换时带弹性地滑到目标栏目 ---- */
    .mt-glider {
        position: absolute;
        z-index: 1;
        top: 4px;
        left: 0;
        width: 0;
        height: calc(100% - 8px);
        border-radius: 19px;
        /* 【由 Agent 完成】2026-10-11 滑块同步更透（0.34/0.14 → 0.22/0.07），
           但描边与内高光比底栏更亮，保证「选中在哪一格」依然一眼可辨 */
        border: 1px solid rgba(255, 255, 255, 0.48);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 100%);
        -webkit-backdrop-filter: blur(18px) saturate(210%);
        backdrop-filter: blur(18px) saturate(210%);
        box-shadow: 0 6px 18px rgba(4, 10, 25, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.62);
        overflow: hidden;
        transition: transform 0.46s cubic-bezier(0.34, 1.5, 0.64, 1),
                    width 0.46s cubic-bezier(0.34, 1.5, 0.64, 1);
    }
    /* 玻璃扫光：切换瞬间一道高光掠过滑块 */
    .mt-glider::after {
        content: "";
        position: absolute;
        inset: -20% -60%;
        background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.60) 50%, transparent 66%);
        opacity: 0;
    }
    .mt-glider.is-sweep::after { animation: mt-sweep 0.72s ease; }
    @keyframes mt-sweep {
        0%   { opacity: 0.95; transform: translateX(-55%); }
        100% { opacity: 0;    transform: translateX(55%); }
    }

    /* ---- 栏目按钮 ---- */
    .mt-item {
        position: relative;
        z-index: 2;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;                /* 原 2px，+2px（图标与文字间距） */
        font-size: 10px;
        line-height: 1;
        color: #333;             /* 深灰文字 */
        /* 【由 Agent 完成】2026-10-11 底栏调更透后，底下若是深色内容会把 #333 文字吃掉的，
           这里给文字/图标加一层很淡的白色光晕（不是阴影），既保证可读又保持玻璃通透 */
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
        text-decoration: none;
        border-radius: 19px;
        overflow: hidden;
        transition: color 0.25s ease, transform 0.34s cubic-bezier(0.34, 1.45, 0.64, 1);
    }
    /* 【由 Agent 完成】2026-10-10 底栏改用 layui 图标字体（比赛=fire / 模型=template-1 /
       推荐=read / 我的=username）。图标是字体不是描边图形：字号控大小，颜色继承 currentColor，
       字重写死 normal —— 图标永远不加粗 */
    .mt-item .mt-ico {
        display: block;
        font-family: "layui-icon" !important;
        font-size: 15px;
        line-height: 1;
        font-weight: normal;
        -webkit-font-smoothing: antialiased;
    }
    /* 【由 Agent 完成】2026-10-10 选中态**不加粗**：图标描边与文字字重都与未选中一致，
       只靠颜色（#000 / #333）+ 液态滑块来区分当前栏目 */
    .mt-item.is-active {
        color: #000;            /* 选中：黑色 */
        font-weight: inherit;   /* 与未选中同字重，不加粗 */
        transform: translateY(-1px);
    }
    .mt-item.is-active .mt-ico { font-weight: normal; }   /* 选中态图标同样不加粗 */

    /* 水滴扩散：点击时从按钮中心晕开一圈水光 */
    .mt-item::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 58px;
        height: 58px;
        margin: -29px 0 0 -29px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0) 68%);
        opacity: 0;
        pointer-events: none;
    }
    .mt-item.is-splash::before { animation: mt-splash 0.66s cubic-bezier(0.22, 1, 0.36, 1); }
    @keyframes mt-splash {
        0%   { transform: scale(0.2); opacity: 0.85; }
        70%  { opacity: 0.18; }
        100% { transform: scale(1.9); opacity: 0; }
    }

    /* 【由 Agent 完成】2026-10-10 底栏占位：手机端统一由 body 让出底栏高度。
       底栏高 51px + 距底 10px = 61px，再留 11px 呼吸，另加 iPhone 底部安全区。
       —— 之前只有销售首页 .sh-page 有 70px 预留，其余 35 个页面的底部内容会被
          fixed 底栏遮住（下滑到页面底部时最后一块内容正好压在底栏下面），
          现统一由 body 承担，保证所有接入底栏的页面都显示得完整 */
    /* 占位 = 底栏高 51px + 悬浮间隙 10px = 61px：
       悬浮态底栏正好占满这 61px；切贴底通栏后也只余 10px，内容末尾贴着底栏，不再露出大段空白。
       不再叠加 env() 安全区——iOS 上它会把占位撑到 95px，底栏下方反而露出更多页面背景 */
    body { padding-bottom: 51px; }   /* 与贴底通栏等高：内容末尾正好落在通栏上缘 */
    .sh-page { padding-bottom: 0; }   /* 改由 body 统一预留，避免双重留白 */
    /* 【由 Agent 完成】2026-10-10 手机浏览器里 100vh 是「大视口」高度，比真正看得见的区域
       高出一条底部工具栏（iOS Safari 地址栏在下、安卓 Chrome 同理，约 44~50px）。
       页面 CSS 里的 min-height:100vh（home.css / member.css 等）因此会让整页比屏幕高一截，
       滚到底时底部多出一段空白、底栏看着像浮在页面外面 —— 这里统一改用 dvh（动态视口）：
       先给 100vh 兜底旧内核，支持 dvh 的浏览器再覆盖成真正的可视高度。
       仅手机端生效，电脑端不进入该媒体查询。 */
    body { min-height: 100vh; min-height: 100dvh; }

    /* 【由 Agent 完成】2026-10-12 左侧抽屉（顶部三条杠菜单）打开时，底栏整条滑出屏幕外隐藏。
       为什么必须隐藏：底栏 z-index 1200，高于左侧导航 .left-nav(999) 与遮罩 .sidebar-overlay(998)，
       抽屉开着时底栏会浮在抽屉和遮罩之上，既挡住菜单又显得层级错乱。
       为什么不用 nav-hidden：nav-hidden 是「缩成 90×24 小框」，那不是隐藏、还看得见；
       抽屉场景要的是完全消失，所以单开一个 class。
       放在 .nav-hidden 之后：同为 0-2-0 特异性时后者生效，抽屉态盖住下滑收起态。
       只动 transform/opacity/pointer-events，不加 visibility —— visibility 是离散属性，
       加了会让滑出动画瞬间跳没；靠 pointer-events:none 保证隐藏期间不挡点击。 */
    .mobile-tabbar.mt-drawer-hide {
        opacity: 0;
        transform: translateY(150%);
        pointer-events: none;
    }

    /* 【由 Agent 完成】2026-10-10 页面右下角的浮动按钮（回到顶部 / 到底部 / 返回）
       统一上移到 72px：底栏占据屏幕底部 10~61px，按钮原本 bottom 24/40px 会被底栏压住，
       下滑后按钮一出现就被盖住一半，这里统一避开 */
    .scroll-btns,
    body.mc-page-drafts .scroll-btns,
    .ma-totop-wrap,
    .mc-float-back,
    .jc-scroll-btns,
    .go-btns { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}