/**
 * 知心 · 全局顶部导航栏样式 V3.1（CB-017 改回随内容滚动）
 * ====================================
 * H-087 方案：position: relative（随内容滚动，不吸顶）
 * 类名体系：zxn- 前缀，完全匹配 global-nav.html（CB-016 新结构）
 * 尺寸/色值全部使用项目 CSS 变量，深浅色 / 毛玻璃 / 收缩态兼容
 */

/* ═══════════════════════════════════════════
 * 导航栏主体（豆包公共基础样式）
 * ═══════════════════════════════════════════ */

/* CB-110：导航玻璃背景抽成变量，统一浅色/深色/手动主题三种覆盖路径
 * 浅色默认 | 深色（auto + 手动 dark）| 手动 light 强制浅色。
 * 由 :root 变量驱动，确保各主题下「正确覆盖」。 */
:root {
    --color-nav-glass: rgba(251, 249, 244, 0.65);
}
/* 手动深色：强制深色玻璃（即使系统是浅色） */
:root[data-theme="dark"] {
    --color-nav-glass: rgba(26, 24, 22, 0.65);
}
/* 手动浅色：强制浅色玻璃（即使系统是深色，覆盖下方 media 默认值） */
:root[data-theme="light"] {
    --color-nav-glass: rgba(251, 249, 244, 0.65);
}

.zxn-nav {
    position: relative;
    width: 100%;
    max-width: var(--max-width); /* CB-108-1：与内容区 .page 一致，宽屏下居中，上下对齐 */
    margin: 0 auto; /* CB-108-1：同上 */
    height: var(--height-top-nav);
    box-sizing: border-box;
    z-index: var(--z-index-nav-top, 300);

    /* 半透明玻璃效果（CB-110：改用变量，跟随主题正确覆盖） */
    background-color: var(--color-nav-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-line);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    /* 三栏布局 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;

    transition: height var(--transition-nav), background-color var(--transition-nav);
}

/* ═══════════════════════════════════════════
 * 左区域：返回箭头 / 留白占位
 * ═══════════════════════════════════════════ */
.zxn-nav-menu {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* 返回箭头按钮（对话等子页） */
.zxn-nav-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-text-body);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s ease;
}
.zxn-nav-back:hover {
    color: var(--color-brand);
}
.zxn-nav-back .zxn-icon {
    width: 20px;
    height: 20px;
}

/* CB-081-2：三杠汉堡（细线 1.5px，与头像线条人形风格一致） */
.zxn-nav-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    margin-left: -10px;
    padding: 0;
    color: var(--color-text-body);
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
}
.zxn-nav-hamburger:hover {
    color: var(--color-brand);
}
.zxn-nav-hamburger:active {
    transform: scale(0.94);
}
.zxn-nav-hamburger svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* ═══════════════════════════════════════════
 * 中间区域：标题、辅助文本
 * ═══════════════════════════════════════════ */
.zxn-nav-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zxn-nav-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-title);
    white-space: nowrap;
    letter-spacing: 0.1em;
    transition: font-size var(--transition-nav);
}

/* 对话页专属：标题旁模式文本 */
.zxn-nav-desc {
    font-size: 13px;
    color: var(--color-text-aux);
    margin-left: 8px;
    white-space: nowrap;
}

/* CB-092-1：发现页顶部搜索栏（三栏布局：汉堡 | 搜索 | 头像） */
.zxn-nav-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: var(--radius-round, 40px);
    background-color: var(--color-bg-hover, #f1f2f4);
    border: 1px solid var(--color-border-line);
    /* CB-096-1：右侧留出与头像的间距，避免登录后头像紧贴搜索栏 */
    margin-right: 12px;
}
.zxn-nav-search__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-text-aux);
}
.zxn-nav-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--color-text-body);
    -webkit-appearance: none;
    appearance: none;
}
.zxn-nav-search__input::placeholder {
    color: var(--color-text-hint, #c8c8c8);
}
/* 入纸态下搜索栏占满中区（左汉堡/右头像两侧固定） */
.zxn-nav--paper .zxn-nav-center {
    justify-content: stretch;
}
/* CB-097：思脉页现已与发现/社区统一为搜索栏（入纸 stretch），不再居中标题，故移除 .page-note 居中覆盖 */

/* ═══════════════════════════════════════════
 * 右区域：头像 + 角标容器
 * ═══════════════════════════════════════════ */
.zxn-nav-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

/* 头像包裹（红点相对其定位） */
.zxn-nav-avatar-wrap {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

/* CB-031-3：按压/hover 临时浮现极淡圆形半透底色（常态无底色，零多余元素） */
.zxn-nav-avatar-wrap::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background-color: rgba(139, 115, 85, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast, 0.15s ease);
}
.zxn-nav-avatar-wrap:active::after,
.zxn-nav-avatar-wrap:hover::after {
    opacity: 1;
}

/* 用户头像 基准样式 36px 圆形（纯CSS禅意线条人形，无问号/首字） */
.zxn-nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    border: 1px solid transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    /* CB-031：一张纸原则，纯头像悬浮，无底色 */
    background-color: transparent;
}

/* 深色模式 默认头像背景（透明，纯线条） */
html[data-theme="dark"] {
    .zxn-nav-avatar {
        background-color: transparent;
    }
}

/* 禅意线条人形 默认头像图案（纯CSS绘制） */
.zxn-nav-avatar::before {
    content: "";
    width: 16px;
    height: 22px;
    border: 1.5px solid var(--color-text-body);
    border-radius: 8px 8px 6px 6px;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* ═══════════════════════════════════════════
 * CB-091：三层头像状态（未登录 / 免费 / 会员）
 * ═══════════════════════════════════════════ */
/* 1. 未登录：浅灰底 + 淡灰虚线圆环 */
.zxn-nav-avatar.unlogin {
    border: 2px dashed var(--color-text-hint, #c9cdd2);
    background-color: var(--color-bg-hover, #f1f2f4);
}
/* 2. 已登录-免费：纯白实线边框 + 1px 分割线细环 */
.zxn-nav-avatar.free {
    border: 2px solid var(--color-card-bg, #fff);
    box-shadow: 0 0 0 1px var(--color-border-line);
}
/* 3. 已登录-会员：品牌色实线边框 */
.zxn-nav-avatar.vip {
    border: 2px solid var(--color-primary);
}
/* CB-251：会员边框按档位着色（identity-* 类挂在 wrap 上，var 透传至 avatar） */
.zxn-nav-avatar-wrap.identity-trainer .zxn-nav-avatar,
.zxn-nav-avatar-wrap.identity-planet .zxn-nav-avatar,
.zxn-nav-avatar-wrap.identity-allstar .zxn-nav-avatar {
    border-color: var(--zxn-identity-primary);
}

/* 会员 V 型角标（右下角，仅会员态显示） */
.zxn-nav-vip-corner {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-bg-page);
    z-index: 2;
}

/* 全局角色标识：导航头像右下角浅灰小字标签（主账号 / 子角色） */
.zxn-nav-role-tag {
    position: absolute;
    right: -2px;
    bottom: -15px;
    font-size: 10px;
    color: var(--color-text-hint, #888);
    white-space: nowrap;
    display: none;
    letter-spacing: .5px;
    pointer-events: none;
}

/* CB-033：滚动时头像轻微透明+微缩，强化「悬浮叠加」而非「固定栏」感知（静止恢复原状） */
.page-scrolling .zxn-nav-avatar {
    opacity: 0.85;
    transform: scale(0.96);
}

/* 消息红点 8px 绝对定位（会员态时展示） */
.zxn-nav-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
    position: absolute;
    top: -2px;
    right: -2px;
    display: none;
}
.zxn-nav-badge--show {
    display: block;
}

/* CB-252：消息未读红点（导航头像左上角） */
.zxn-nav-msgdot {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-danger);
    border: 2px solid var(--color-bg-card);
    display: none;
    z-index: 2;
}
/* CB-252：抽屉「消息通知」项的未读红点 */
.zxn-avatar-popover-dot {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-danger);
    display: none;
}

/* CB-060 C4：抽屉会员徽章（按 member_type 短标识 + 配色，由 JS 注入） */
.zxn-drawer-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.zxn-drawer-badge {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    padding: 3px 7px;
    border-radius: 999px;
    letter-spacing: .5px;
    white-space: nowrap;
}


/* 我的页：昵称文本 */
.zxn-nav-nickname {
    font-size: 16px;
    color: var(--color-text-title);
    margin-left: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* CB-033：我的页昵称下方会员辅助文字（flex-wrap 后自动落到昵称下方一行，与组合融为一体） */
.zxn-nav-member-desc {
    flex-basis: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-aux);
    margin-top: 4px;
    font-weight: 400;
}
/* 我的页中区改为可换行：头像+昵称一行，会员文字另起一行 */
.page-mine .zxn-nav-center {
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
 * 分页面专属排版（豆包规范）
 * ═══════════════════════════════════════════ */

/* 发现 / 笔记 / 社区：左区留白占位，右区仅头像 */
.page-discover .zxn-nav-menu,
.page-note .zxn-nav-menu,
.page-community .zxn-nav-menu {
    width: 20px;
}

/* CB-081-2：加回三杠汉堡时，左区宽度自适应以容纳 44px 触摸目标 */
.zxn-nav--hamburger.page-discover .zxn-nav-menu,
.zxn-nav--hamburger.page-note .zxn-nav-menu,
.zxn-nav--hamburger.page-community .zxn-nav-menu,
.zxn-nav--hamburger.page-mine .zxn-nav-menu {
    width: auto;
}

/* 对话页：左侧返回箭头，沉浸式无多余元素 */
.page-chat .zxn-nav-menu .zxn-nav-back {
    margin-right: 4px;
}

/* 我的页：居中展示头像+昵称，左右区域留白占位 */
.page-mine .zxn-nav-menu,
.page-mine .zxn-nav-actions {
    width: 20px;
}

/* ═══════════════════════════════════════════
 * 「一张纸」无框导航（CB-026：5核心页空标题时启用）
 * CB-031：单/双头像页 fixed 悬浮右上角（顶16px/右18px），我的页随内容滚动居中
 * ═══════════════════════════════════════════ */
.zxn-nav--frameless {
    position: fixed;
    top: 16px;
    /* CB-114-2：宽屏下不再铺满视口，改为居中并约束为内容区宽度(max-width 500px)，
       使三杠/搜索栏/头像与下方内容区左右对齐（移动端 width:100% 等同铺满，无副作用） */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-width);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    height: auto;
    padding: 0 16px;
    z-index: var(--z-index-nav-top, 300);
}

/* 我的页：非固定悬浮，区块随内容自然滚动、水平居中，组合距顶24px */
.zxn-nav--frameless.page-mine {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    padding: 24px 16px 0;
}

/* ═══════════════════════════════════════════
 * CB-050：头像入纸（替代 fixed 悬浮，随内容自然滚动）
 * 头像属于页面纸面内容的一部分，随顶部内容滚出视口，彻底不遮挡标签栏/内容。
 * 「返回顶部」按钮由页面 JS 在滚动阈值后显隐，替代永久悬浮头像。
 * ═══════════════════════════════════════════ */
.zxn-nav--paper {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: auto;
    /* CB-054-2：头像入纸后，统一头像行与下方内容/标签栏的间距（发现/笔记/社区/我的 一致） */
    padding: 14px 16px 12px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
}
/* 入纸态下头像保持纯净（无悬浮叠加底色） */
.zxn-nav--paper .zxn-nav-avatar {
    opacity: 1;
    transform: none;
}

/* CB-031：固定悬浮头像时，内容区顶部留白避免被遮挡（双头像托盘64px） */
/* CB-033：单头像页改为极小 20px 安全留白，内容顶屏、头像纯悬浮叠加在内容上层，不再独占一行空白 */
body.zxn-nav-fixed > main,
body.zxn-nav-fixed > .page {
    padding-top: 20px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════
 * 侧边抽屉（头像点击触发，整合原下拉菜单）
 * ═══════════════════════════════════════════ */
.zxn-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-nav);
}
.zxn-drawer-overlay--show {
    opacity: 1;
    pointer-events: auto;
}

.zxn-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: var(--color-bg-page);
    z-index: 10000;
    transform: translateX(-100%);
    transition: transform var(--transition-nav);
    display: flex;
    flex-direction: column;
}

.zxn-drawer--show {
    transform: translateX(0);
}

.zxn-drawer-header {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border-line);
    cursor: pointer;
}

.zxn-drawer-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zxn-drawer-name {
    font-size: 14px;
    color: var(--color-text-title);
}

.zxn-drawer-role {
    font-size: 12px;
    color: var(--color-text-aux);
    margin-top: 2px;
}

.zxn-drawer-close {
    margin-left: auto;
    font-size: 18px;
    color: var(--color-text-aux);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
}

.zxn-drawer-body {
    flex: 1;
    padding: 8px 0;
}

/* CB-031-2：分组间以空白留白分隔（不用分割线/色块） */
.zxn-drawer-group {
    padding: 2px 0;
}
.zxn-drawer-group + .zxn-drawer-group {
    margin-top: 12px;
}

/* 退出登录：辅助灰、置底弱化（防误触） */
.zxn-drawer-item--logout {
    color: var(--color-text-aux);
}

.zxn-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-text-body);
    text-decoration: none;
    cursor: pointer;
}

.zxn-drawer-item:active {
    background: var(--color-bg-hover);
}

.zxn-drawer-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.zxn-drawer-item-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zxn-drawer-footer {
    padding: 12px 16px;
    font-size: 11px;
    color: var(--color-text-aux);
    border-top: 1px solid var(--color-border-line);
}

/* ═══════════════════════════════════════════
 * CB-091：头像弹窗（个人私域 · 与三杠抽屉分离）
 * ═══════════════════════════════════════════ */
.zxn-avatar-popover-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-nav);
}
.zxn-avatar-popover-overlay--show {
    opacity: 1;
    pointer-events: auto;
}
.zxn-avatar-popover {
    position: fixed;
    top: calc(var(--height-top-nav, 48px) + 8px);
    right: 16px;
    width: 240px;
    z-index: 999;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border-line);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-popup, 0 12px 48px rgba(0, 0, 0, 0.12));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity var(--transition-nav), transform var(--transition-nav);
}
.zxn-avatar-popover--show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.zxn-avatar-popover-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-line);
}
.zxn-avatar-popover-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.zxn-avatar-popover-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-title);
}
.zxn-avatar-popover-badge {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--color-primary);
    background: var(--color-primary-bg);
    font-weight: 500;
    white-space: nowrap;
}
.zxn-avatar-popover-list {
    padding: 6px 0;
}
.zxn-avatar-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-text-body);
    cursor: pointer;
    transition: background-color var(--transition-fast, 0.15s ease);
}
.zxn-avatar-popover-item:active {
    background: var(--color-bg-hover);
}
.zxn-avatar-popover-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-aux);
}
.zxn-avatar-popover-icon .zxn-icon {
    width: 20px;
    height: 20px;
}
.zxn-avatar-popover-label {
    flex: 1;
}
.zxn-avatar-popover-tail {
    color: var(--color-text-hint, #888);
    font-size: 12px;
    display: flex;
    align-items: center;
}
.zxn-avatar-popover-tail .zxn-icon {
    width: 16px;
    height: 16px;
}

/* ═══════════════════════════════════════════
 * 深色模式
 * ═══════════════════════════════════════════ */
:root[data-theme="dark"]{color-scheme: dark;
    /* CB-110：跟随系统深色时，将导航玻璃变量切到深色；手动浅色(下面 :not)时排除，保持浅色 */
    
        --color-nav-glass: rgba(26, 24, 22, 0.65);
    
    .zxn-nav {
        background-color: var(--color-nav-glass);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }
    .zxn-nav--frameless {
        background: transparent;
        box-shadow: none;
    }
    /* CB-031-3：头像按压/hover 暗色淡底色 */
    .zxn-nav-avatar-wrap:active::after,
    .zxn-nav-avatar-wrap:hover::after {
        background-color: rgba(201, 185, 163, 0.12);
    }
    .zxn-drawer {
        background: #1A1816;
    }
    /* CB-091：头像弹窗深色模式 */
    .zxn-avatar-popover {
        background: #1A1816;
        border-color: #3a3a5c;
    }
    .zxn-nav-vip-corner {
        border-color: #1A1816;
    }
}