/* ============================================================================
   移动端底部导航（H5）
   ----------------------------------------------------------------------------
   背景：站点的分类侧栏 .left-nav 在 ≤767px 被 display:none，手机上没有任何
   导航入口，返回首页 / 看收藏 / 进个人中心都要从右上角的小字下拉里绕。

   规则：
     - 只在 ≤767px 显示（与 .left-nav 的隐藏断点完全一致），桌面端零影响；
     - 高度 56px，底部叠加 iPhone 安全区内边距，避免被 Home Indicator 压住；
     - 三个入口：首页 / 收藏 / 我的（不放消息——没有消息要主动推给用户，
       消息入口保留在「我的」页面里）；
     - 高亮由 `_bottom_nav.html` 末尾的内联脚本按 pathname 判定，不依赖各页面模板。

   标记结构见 views/home/layout/_bottom_nav.html。
   引入位置：views/home/layout/_header.html（<head> 内，main.css 之后）。
   ========================================================================== */

.tb-bnav {
    display: none;
}

@media (max-width: 767px) {

    .tb-bnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: flex;
        align-items: stretch;
        height: 56px;
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 14px rgba(16, 24, 40, .06);
        /* iPhone 底部安全区（iOS 11.2+ 用 env()，老版本用 constant() 兜底） */
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: content-box;
    }

    /* 给页面底部让出导航的高度，否则会盖住页脚最后一行。
       个人中心系列页面 body 带 min-h-screen，配合 border-box 不会多出滚动条。 */
    body {
        padding-bottom: calc(56px + constant(safe-area-inset-bottom));
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    /* 工具页的 toast 原本固定在 bottom:2.5rem，会被底栏压住，这里抬到导航之上 */
    .tool_alert {
        bottom: calc(56px + env(safe-area-inset-bottom) + .75rem);
    }

    .tb-bnav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #9ca3af;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        transition: color .16s ease;
    }

    .tb-bnav-item svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.9;
        transition: transform .16s ease;
    }

    .tb-bnav-label {
        font-size: 10px;
        line-height: 1;
        letter-spacing: .01em;
    }

    .tb-bnav-item.is-active {
        color: #3bb346;
        font-weight: 600;
    }

    .tb-bnav-item.is-active svg {
        transform: translateY(-1px);
    }

    /* 激活项顶部的指示条 */
    .tb-bnav-item.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        width: 22px;
        height: 2.5px;
        border-radius: 0 0 3px 3px;
        background: #3bb346;
    }

    .tb-bnav-item:active {
        opacity: .75;
    }
}