/* ========================================
   Puock-Zi 移动端样式
   ======================================== */

/* 移动端顶部栏 */
.pz-mobile-topbar {
    display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: 50px; background: #fff; align-items: center; justify-content: space-between;
    padding: 0 15px; box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.pz-mobile-menu-btn, .pz-mobile-search-btn {
    background: none; border: none; font-size: 20px; cursor: pointer; color: #333; width: 40px; height: 40px;
}
.pz-mobile-logo { flex: 1; text-align: center; font-weight: 700; font-size: 17px; color: #333; text-decoration: none; }
.pz-mobile-logo img { max-height: 32px; }
.pz-mobile-search-box {
    display: none; position: fixed; top: 50px; left: 0; right: 0; z-index: 901;
    background: #fff; padding: 10px 15px; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.pz-mobile-search-box form { display: flex; gap: 8px; }
.pz-mobile-search-box input { flex: 1; padding: 9px 12px; border: 1px solid #eaeaea; border-radius: 8px; }
.pz-mobile-search-box button { padding: 0 16px; background: var(--pz-primary); color: #fff; border: none; border-radius: 8px; }

/* ============================================================
   移动端侧边栏：注入父主题原生 #mobile-menu（接管模式）
   子主题不再自建面板，仅将用户卡/数据条/VIP卡等注入
   #mobile-menu .p-block 的 nav 前后，开关/遮罩/动画全部复用父主题。
   ============================================================ */

/* 注入内容抵消父主题 .menus 的 20px 内边距，通栏呈现 */
#mobile-menu .menus .pz-ms-top,
#mobile-menu .menus .pz-ms-bottom { margin: 0 -20px; }
/* nav 顶部留出与注入卡片的间距 */
#mobile-menu .menus .p-block nav { padding-top: 6px; }
/* 面板背景交给父主题 var(--pk-bg-box)，注入卡片用半透明底避免色差 */
#mobile-menu .pz-ms-auth-btn,
#mobile-menu .pz-ms-logged-grid a { background: rgba(127,127,140,.10); }
#mobile-menu .pz-ms-user-avatar { border-color: rgba(127,127,140,.25); }
#mobile-menu .pz-ms-user-msg { background: rgba(127,127,140,.12); }
#mobile-menu .pz-ms-menu-item:active,
#mobile-menu .pz-ms-wp-menu li a:active { background: rgba(127,127,140,.14); }

/* Tabbar 滚动隐藏（后台「滚动时隐藏」开关） */
.pz-tabbar-scroll-hide .pz-mobile-tabbar { transition: transform .3s ease; }
.pz-tabbar-scroll-hide .pz-mobile-tabbar.pz-tabbar-hidden { transform: translateY(100%); }

/* ============ 注入父主题侧边栏的内部样式 ============ */
/* （顶栏 .pz-ms-header 已移除：开关/关闭按钮复用父主题 .mobile-menu-s / .mobile-menu-close） */

/* 用户信息卡 */
.pz-ms-user-card {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 16px 12px; flex-shrink: 0;
}
.pz-ms-user-avatar {
    width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
    border: 2px solid #f2f2f5; flex-shrink: 0; display: block;
}
.pz-ms-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-ms-user-meta { flex: 1; min-width: 0; }
.pz-ms-user-name { font-size: 17px; font-weight: 700; color: #222; }
.pz-ms-user-vip {
    display: inline-flex; align-items: center; gap: 3px;
    margin-top: 4px; padding: 2px 8px; border-radius: 10px;
    background: linear-gradient(135deg, #ff9a44, #ff5e62); color: #fff;
    font-size: 11px;
}
.pz-ms-user-level {
    display: inline-block; margin-top: 4px; font-size: 12px; color: #999;
}
.pz-ms-user-msg {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #666; font-size: 18px; background: #f7f8fa; text-decoration: none;
}

/* 数据条 */
.pz-ms-data-bar {
    display: flex; padding: 0 16px 14px; flex-shrink: 0;
}
.pz-ms-data-bar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: inherit;
}
.pz-ms-data-bar b { font-size: 16px; font-weight: 700; color: #333; }
.pz-ms-data-bar span { font-size: 12px; color: #999; }

/* 主导航菜单 */
.pz-ms-menu { padding: 6px 14px; }
.pz-ms-menu-item,
.pz-ms-wp-menu li a {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 12px; border-radius: 12px;
    color: #333; text-decoration: none; font-size: 15px;
    background: transparent; border: none; width: 100%; cursor: pointer;
    transition: background .15s; text-align: left;
}
.pz-ms-menu-item:active,
.pz-ms-wp-menu li a:active { background: #f5f6fa; }
.pz-ms-menu-item.active { color: var(--pz-primary); font-weight: 600; }
.pz-ms-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #ddd; flex-shrink: 0;
}
.pz-ms-menu-item.active .pz-ms-dot { background: var(--pz-primary); }
.pz-ms-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-ms-badge {
    font-size: 11px; font-weight: 600; color: #fff; background: #ff4757;
    padding: 1px 7px; border-radius: 10px; font-style: normal; flex-shrink: 0;
}
.pz-ms-theme-toggle { justify-content: flex-start; }
.pz-ms-theme-icon { margin-left: auto; color: #666; font-size: 16px; }
.pz-ms-wp-menu { list-style: none; margin: 0; padding: 0; }
.pz-ms-wp-menu li { margin: 0; padding: 0; }
/* 对接原主题「主要菜单」后，为 WP 菜单项补齐圆点 + 当前项高亮（与硬编码项一致） */
.pz-ms-wp-menu li a { position: relative; }
.pz-ms-wp-menu li a::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: #ddd; flex-shrink: 0; display: inline-block;
}
.pz-ms-wp-menu li.current-menu-item > a,
.pz-ms-wp-menu li.current-menu-ancestor > a { color: var(--pz-primary); font-weight: 600; }
.pz-ms-wp-menu li.current-menu-item > a::before { background: var(--pz-primary); }

/* 会员开通卡片 */
.pz-ms-vip-card {
    display: flex; align-items: center; gap: 10px;
    margin: 8px 16px 14px; padding: 13px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3a3a4e 0%, #232330 100%);
    color: #fff; text-decoration: none; font-size: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,.15); flex-shrink: 0;
}
.pz-ms-vip-card i { font-size: 18px; color: #ffd700; }
.pz-ms-vip-card span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 游客登录 */
.pz-ms-auth {
    display: flex; gap: 12px; padding: 0 16px 14px; flex-shrink: 0;
}
.pz-ms-auth-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 12px;
    background: #f7f8fa; color: #555; text-decoration: none;
    font-size: 14px; font-weight: 500;
}
.pz-ms-auth-btn i { color: var(--pz-primary); font-size: 16px; }

/* 快速登录 */
.pz-ms-quick { padding: 0 16px 20px; text-align: center; flex-shrink: 0; }
.pz-ms-quick-title {
    position: relative; font-size: 12px; color: #bbb; margin-bottom: 12px;
}
.pz-ms-quick-title::before,
.pz-ms-quick-title::after {
    content: ''; position: absolute; top: 50%; width: 40px; height: 1px; background: #eee;
}
.pz-ms-quick-title::before { left: 16px; }
.pz-ms-quick-title::after { right: 16px; }
.pz-ms-quick-btns { display: flex; justify-content: center; gap: 20px; }
.pz-ms-quick-btns a {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.pz-ms-quick-qq { background: #12b7f5; }
.pz-ms-quick-wx { background: #07c160; }

/* 已登录快捷宫格 */
.pz-ms-logged-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    padding: 0 16px 20px; flex-shrink: 0;
}
.pz-ms-logged-grid a {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 4px; border-radius: 12px; background: #f7f8fa;
    color: #555; text-decoration: none; font-size: 12px;
}
.pz-ms-logged-grid a i { font-size: 18px; color: var(--pz-primary); }

/* 移动端底部 Tabbar —— 默认浅色，跟随主题明暗（html[data-bs-theme] 由 Puock 控制） */
.pz-mobile-tabbar {
    display: none; position: fixed; z-index: 900;
    left: 0; right: 0; bottom: 0;
    height: 62px; padding: 4px 6px calc(env(safe-area-inset-bottom, 0px) + 4px) 6px;
    display: flex; align-items: center; justify-content: space-around;
    background: var(--bs-body-bg, #ffffff);
    border-top: 1px solid var(--bs-border-color, #ececec);
    box-shadow: 0 -4px 18px rgba(0,0,0,.08);
}
.pz-mobile-tabbar .pz-tabbar-item {
    position: relative; flex: 1; max-width: 72px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--bs-secondary-color, #888); text-decoration: none; font-size: 11px;
    padding: 6px 0; border-radius: 14px;
    transition: color .25s, transform .2s, text-shadow .25s;
}
.pz-mobile-tabbar .pz-tabbar-item i {
    font-size: 22px; transition: transform .25s;
}
.pz-mobile-tabbar .pz-tabbar-item.active { color: var(--bs-emphasis-color, #222); }
.pz-mobile-tabbar .pz-tabbar-item.active i {
    transform: translateY(-2px) scale(1.1);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.pz-mobile-tabbar .pz-tabbar-item:active { transform: scale(.92); }

/* 统一图标盒子：FA / 子比SVG / 图片 均固定尺寸并居中，避免大小不一 */
.pz-tabbar-ico { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.pz-tabbar-ico i { font-size: 22px; line-height: 1; }
.pz-tabbar-ico .pz-svg-icon { width: 22px; height: 22px; }
.pz-tabbar-ico .pz-tabbar-icon-img { width: 22px; height: 22px; }

/* 图标颜色（后台「Tabbar图标颜色」可逐类型设置，默认沿用多彩；SVG与FontAwesome均生效） */
.pz-tabbar-home  i { color: var(--pz-tabbar-home-color, #ff2e63); }
.pz-tabbar-msg   i { color: var(--pz-tabbar-msg-color, #38f9d7); }
.pz-tabbar-user  i { color: var(--pz-tabbar-user-color, #00f2fe); }
.pz-tabbar-vip   i { color: var(--pz-tabbar-vip-color, #fda085); }
.pz-tabbar-top   i { color: var(--pz-tabbar-top-color, #fbc2eb); }

.pz-tabbar-badge {
    position: absolute; left: 50%; top: 0; margin-left: 10px;
    background: #ff4757; color: #fff; font-size: 10px; padding: 0 5px;
    border-radius: 10px; font-style: normal; line-height: 16px; min-width: 16px; text-align: center;
    border: 2px solid var(--bs-body-bg, #fff);
}

/* 图标图片（媒体库选择）尺寸 */
.pz-mobile-tabbar .pz-tabbar-icon-img,
.pz-mobile-tabbar .pz-tabbar-center .pz-tabbar-icon-img {
    width: 24px; height: 24px; object-fit: contain; display: block;
}
.pz-mobile-tabbar .pz-tabbar-item.active .pz-tabbar-icon-img {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

/* 子比(Zibll)内置 SVG 图标（内联，随 currentColor 着色，按类型套用品牌色） */
.pz-mobile-tabbar .pz-tabbar-item .pz-svg-icon,
.pz-mobile-tabbar .pz-tabbar-center .pz-svg-icon {
    width: 22px; height: 22px; display: block; fill: currentColor; transition: transform .25s;
}
.pz-mobile-tabbar .pz-tabbar-item.active .pz-svg-icon {
    transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.pz-mobile-tabbar .pz-tabbar-home  .pz-svg-icon { fill: var(--pz-tabbar-home-color, #ff2e63); }
.pz-mobile-tabbar .pz-tabbar-msg   .pz-svg-icon { fill: var(--pz-tabbar-msg-color, #38f9d7); }
.pz-mobile-tabbar .pz-tabbar-user  .pz-svg-icon { fill: var(--pz-tabbar-user-color, #00f2fe); }
.pz-mobile-tabbar .pz-tabbar-vip   .pz-svg-icon { fill: var(--pz-tabbar-vip-color, #fda085); }
.pz-mobile-tabbar .pz-tabbar-top   .pz-svg-icon { fill: var(--pz-tabbar-top-color, #fbc2eb); }
.pz-mobile-tabbar .pz-tabbar-center .pz-svg-icon { fill: var(--pz-tabbar-publish-color, #ff4081); }

/* 中心发布按钮：去掉背景块，与普通 Tabbar 项一致显示（仅彩色图标 + 文字） */
.pz-tabbar-center {
    flex: 1; max-width: 72px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--pz-tabbar-publish-color, #ff4081); text-decoration: none; font-size: 11px;
    padding: 6px 0; border-radius: 14px;
    background: transparent;
    position: relative; transition: transform .2s, box-shadow .2s;
}
.pz-tabbar-center i {
    font-size: 22px; /* 与首页图标等大 */
    color: var(--pz-tabbar-publish-color, #ff4081);
    -webkit-text-fill-color: var(--pz-tabbar-publish-color, #ff4081);
}
.pz-tabbar-center:active { transform: scale(.92); }

/* 兜底：非 publish 类型不会走到 .pz-tabbar-center；.pz-tabbar-fab 旧类名不再使用 */
.pz-tabbar-fab { display: none; }

/* ============ 跟随 Puock 明暗模式 ============ */
/* Tabbar：深色主题下使用深色渐变长条 */
html[data-bs-theme="dark"] .pz-mobile-tabbar {
    background: linear-gradient(180deg, #3a3a4e 0%, #232330 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 -4px 20px rgba(0,0,0,.35);
}
html[data-bs-theme="dark"] .pz-mobile-tabbar .pz-tabbar-item { color: rgba(255,255,255,.55); }
html[data-bs-theme="dark"] .pz-mobile-tabbar .pz-tabbar-item.active { color: #fff; }
html[data-bs-theme="dark"] .pz-mobile-tabbar .pz-tabbar-center { color: rgba(255,255,255,.7); }
html[data-bs-theme="dark"] .pz-tabbar-badge { border-color: #2b2b3a; }

/* 顶部栏：深色变体 */
html[data-bs-theme="dark"] .pz-mobile-topbar {
    background: #1c1c26; box-shadow: 0 1px 6px rgba(0,0,0,.3);
}
html[data-bs-theme="dark"] .pz-mobile-menu-btn,
html[data-bs-theme="dark"] .pz-mobile-search-btn { color: #dcdce4; }
html[data-bs-theme="dark"] .pz-mobile-logo { color: #fff; }
html[data-bs-theme="dark"] .pz-mobile-search-box { background: #1c1c26; }
html[data-bs-theme="dark"] .pz-mobile-search-box input {
    border-color: #333; background: #26262f; color: #eee;
}

/* 侧边栏注入内容：深色变体（面板背景由父主题 var(--pk-bg-box) 控制，
   卡片底色已用 rgba 半透明自适应，此处仅适配文字/线条颜色） */
html[data-bs-theme="dark"] .pz-ms-user-name { color: #e6e6e6; }
html[data-bs-theme="dark"] .pz-ms-user-level { color: #8a8a99; }
html[data-bs-theme="dark"] .pz-ms-data-bar b { color: #e6e6e6; }
html[data-bs-theme="dark"] .pz-ms-data-bar span { color: #8a8a99; }
html[data-bs-theme="dark"] .pz-ms-menu-item,
html[data-bs-theme="dark"] .pz-ms-wp-menu li a { color: #dcdce4; }
html[data-bs-theme="dark"] .pz-ms-dot { background: #5a5a68; }
html[data-bs-theme="dark"] .pz-ms-theme-icon { color: #8a8a99; }
html[data-bs-theme="dark"] .pz-ms-wp-menu li a::before { background: #5a5a68; }
html[data-bs-theme="dark"] .pz-ms-wp-menu li.current-menu-item > a::before { background: var(--pz-primary); }
html[data-bs-theme="dark"] .pz-ms-vip-card { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
html[data-bs-theme="dark"] .pz-ms-quick-title { color: #777; }
html[data-bs-theme="dark"] .pz-ms-quick-title::before,
html[data-bs-theme="dark"] .pz-ms-quick-title::after { background: #2c2c38; }

@media (prefers-reduced-motion: reduce) {
    .pz-tabbar-center, .pz-mobile-tabbar .pz-tabbar-item { transition: none; }
}

/* 子主题移动端 UI 接管时（≤768px），隐藏 Puock 父主题原生元素，避免冲突；
   注意：#mobile-menu / #mobile-menu-backdrop 不再隐藏——侧边栏已改为注入父主题原生抽屉。
   平板(769~991px)保留父主题原生抽屉与汉堡，避免死按钮 */
@media (max-width: 768px) {
    body.pz-mobile-ui #rb-float-actions { display: none !important; }

    /* 完全接管：移动端隐藏父主题整个导航栏，子主题顶栏作为唯一头部 */
    body.pz-mobile-ui #header { display: none !important; }
}

/* VIP徽章移动端 */
.pz-vip-badge {
    display: inline-flex; align-items: center; gap: 3px; font-size: 11px;
    padding: 1px 7px; border-radius: 10px; color: #fff; background: var(--pz-vip-gold);
}

/* 移动端显示顶部栏和Tabbar（仅在子主题 UI 接管时调整布局，避免影响 Puock 原生排版） */
@media (max-width: 768px) {
    body.pz-mobile-ui { padding-top: 50px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
    .pz-mobile-topbar { display: flex; }
    .pz-mobile-tabbar { display: flex; }
}

/* 桌面端隐藏移动端元素（#pz-ms-inject 为注入源容器，本身 display:none，此处兜底） */
@media (min-width: 769px) {
    .pz-mobile-topbar, .pz-mobile-tabbar, .pz-mobile-search-box,
    #pz-ms-inject { display: none !important; }
}

/* ============ 子比(Zibll) SVG 图标：移动端各场景尺寸（替换原 FontAwesome） ============ */
.pz-ms-grid-icon .pz-svg-icon { width: 22px; height: 22px; display: block; }
.pz-ms-nav-item > .pz-svg-icon:first-child { width: 22px; height: 22px; text-align: center; color: var(--pz-primary); flex: 0 0 auto; }
.pz-ms-nav-item .pz-ms-arrow { width: 14px; height: 14px; margin-left: auto; }
.pz-mobile-menu-btn .pz-svg-icon,
.pz-mobile-search-btn .pz-svg-icon { width: 20px; height: 20px; }
/* SVG 跟随容器文字色（深色模式自动适配，已在 .pz-svg-icon 走 currentColor） */