/**
 * 全站壳层宽度兜底（主壳 Tab + 工具子页 + 底栏对齐）
 * 与 common.css --h5-app-max-width 一致：430 / 540 / 640
 * 登录页、代理中心保持原样
 */
:root {
    --h5-app-max-width: 640px;
    --tab-bar-max-width: var(--h5-app-max-width, 640px);
}

html body:not(.page-auth) .app-container {
    width: 100% !important;
    max-width: var(--h5-app-max-width, 640px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* 画布/视觉工作台保留宽屏创作空间，不套标准工具壳层。 */
html body.page-canvas .app-container,
html body.universal-canvas-page .app-container,
html body.visual-studio-page .app-container,
html body.visual-canvas-page .app-container,
html body[data-tool-layout="canvas"] .app-container {
    width: 100% !important;
    max-width: none !important;
}

html body.page-tab-create .tab-bar,
html body.page-tab-agent .tab-bar,
html body.page-tab-template .tab-bar,
html body.page-tab-mine .tab-bar,
html body.page-tab-gzh-master .tab-bar,
html body.page-tab-xhs-master .tab-bar,
html body.gzh-viral-page .tab-bar,
html body.xhs-viral-page .tab-bar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: var(--h5-app-max-width, 430px) !important;
    height: auto !important;
    min-height: 0 !important;
    /* 图标贴顶；安全区只垫在下面，避免整栏垂直居中把图标悬空 */
    padding: 8px 2px max(4px, env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0 !important;
    column-gap: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 0 !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 12000 !important;
    overflow: visible !important;
}

/* AI 助理页走 Grid 壳层（ai_chat.php），底栏勿 fixed+transform */
html body.page-tab-assistant:not(.page-tab-xhs-master) .tab-bar {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04) !important;
}

html body.page-tab-gzh-master .app-container,
html body.page-tab-xhs-master .app-container,
html body.gzh-viral-page .app-container,
html body.xhs-viral-page .app-container {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

/**
 * 全站底栏：与「创作首页」完全一致（尺寸/字号/选中近黑底）
 * 含 AI 助理 / 公众号 / 小红书 / 我的，禁止各页再改大小
 */
html body .tab-bar a.tab-item,
html body.page-tab-create .tab-bar a.tab-item,
html body.page-tab-mine .tab-bar a.tab-item,
html body.page-tab-assistant .tab-bar a.tab-item,
html body.page-tab-gzh-master .tab-bar a.tab-item,
html body.page-tab-xhs-master .tab-bar a.tab-item,
html body.gzh-viral-page .tab-bar a.tab-item,
html body.xhs-viral-page .tab-bar a.tab-item,
html.lh-ai-chat-html body.page-tab-assistant .tab-bar a.tab-item,
html.lh-ai-chat-html body.page-tab-assistant .lh-ai-redesign.lh-ai-page-root a.tab-item {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 2px !important;
    margin: 0 !important;
    text-decoration: none !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    background: transparent !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    transition: color 0.2s ease, background 0.2s ease !important;
}

html body .tab-bar a.tab-item.active,
html body.page-tab-create .tab-bar a.tab-item.active,
html body.page-tab-mine .tab-bar a.tab-item.active,
html body.page-tab-assistant .tab-bar a.tab-item.active,
html body.page-tab-gzh-master .tab-bar a.tab-item.active,
html body.page-tab-xhs-master .tab-bar a.tab-item.active,
html body.gzh-viral-page .tab-bar a.tab-item.active,
html body.xhs-viral-page .tab-bar a.tab-item.active,
html.lh-ai-chat-html body.page-tab-assistant .tab-bar a.tab-item.active,
html.lh-ai-chat-html body.page-tab-assistant .lh-ai-redesign.lh-ai-page-root a.tab-item.active {
    color: #1A1A2E !important;
    -webkit-text-fill-color: #1A1A2E !important;
    font-weight: 700 !important;
    background: rgba(26, 26, 46, 0.1) !important;
    border-radius: 10px !important;
}

html body .tab-bar a.tab-item.active .tab-label,
html body.page-tab-create .tab-bar a.tab-item.active .tab-label,
html body.page-tab-mine .tab-bar a.tab-item.active .tab-label,
html body.page-tab-assistant .tab-bar a.tab-item.active .tab-label,
html body.page-tab-gzh-master .tab-bar a.tab-item.active .tab-label,
html body.page-tab-xhs-master .tab-bar a.tab-item.active .tab-label,
html body.gzh-viral-page .tab-bar a.tab-item.active .tab-label,
html body.xhs-viral-page .tab-bar a.tab-item.active .tab-label,
html.lh-ai-chat-html body.page-tab-assistant .lh-ai-redesign.lh-ai-page-root a.tab-item.active .tab-label {
    color: #1A1A2E !important;
    -webkit-text-fill-color: #1A1A2E !important;
    font-weight: 700 !important;
    background: transparent !important;
}

html body .tab-bar a.tab-item svg.tab-icon,
html body .tab-bar a.tab-item svg,
html body.page-tab-create .tab-bar a.tab-item svg.tab-icon,
html body.page-tab-mine .tab-bar a.tab-item svg.tab-icon,
html body.page-tab-assistant .tab-bar a.tab-item svg.tab-icon,
html body.page-tab-gzh-master .tab-bar a.tab-item svg.tab-icon,
html body.page-tab-xhs-master .tab-bar a.tab-item svg.tab-icon,
html body.gzh-viral-page .tab-bar a.tab-item svg.tab-icon,
html body.xhs-viral-page .tab-bar a.tab-item svg.tab-icon,
html.lh-ai-chat-html body.page-tab-assistant .lh-ai-redesign.lh-ai-page-root a.tab-item .tab-icon,
html.lh-ai-chat-html body.page-tab-assistant .lh-ai-redesign.lh-ai-page-root a.tab-item svg.tab-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    color: inherit !important;
    stroke-width: 1.75px !important;
    transform: none !important;
    filter: none !important;
}

html body .tab-bar a.tab-item.active svg.tab-icon,
html body.page-tab-create .tab-bar a.tab-item.active svg.tab-icon,
html body.page-tab-assistant .tab-bar a.tab-item.active svg.tab-icon,
html.lh-ai-chat-html body.page-tab-assistant .lh-ai-redesign.lh-ai-page-root a.tab-item.active svg.tab-icon {
    stroke: #1A1A2E !important;
    color: #1A1A2E !important;
    stroke-width: 1.95px !important;
}

html body .tab-bar a.tab-item svg.tab-icon path,
html body .tab-bar a.tab-item svg.tab-icon circle,
html body .tab-bar a.tab-item svg.tab-icon rect,
html body .tab-bar a.tab-item svg.tab-icon line,
html body .tab-bar a.tab-item svg.tab-icon polyline {
    stroke-width: 1.75 !important;
    stroke: currentColor !important;
    fill: none !important;
}

html body .tab-bar a.tab-item.active svg.tab-icon path,
html body .tab-bar a.tab-item.active svg.tab-icon circle,
html body .tab-bar a.tab-item.active svg.tab-icon rect,
html body .tab-bar a.tab-item.active svg.tab-icon line,
html body .tab-bar a.tab-item.active svg.tab-icon polyline {
    stroke-width: 1.95 !important;
}

html body .tab-bar a.tab-item .tab-label,
html body.page-tab-create .tab-bar a.tab-item .tab-label,
html body.page-tab-mine .tab-bar a.tab-item .tab-label,
html body.page-tab-assistant .tab-bar a.tab-item .tab-label,
html body.page-tab-gzh-master .tab-bar a.tab-item .tab-label,
html body.page-tab-xhs-master .tab-bar a.tab-item .tab-label,
html body.gzh-viral-page .tab-bar a.tab-item .tab-label,
html body.xhs-viral-page .tab-bar a.tab-item .tab-label,
html.lh-ai-chat-html body.page-tab-assistant .lh-ai-redesign.lh-ai-page-root a.tab-item .tab-label {
    display: block !important;
    margin-top: 2px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
    max-width: none !important;
}

/* AI 助理页底栏高度与创作首页对齐（勿额外加高） */
html.lh-ai-chat-html body.page-tab-assistant .lh-ai-redesign.lh-ai-page-root nav.tab-bar,
html.lh-ai-chat-html body.page-tab-assistant .lh-ai-redesign.lh-ai-page-root .tab-bar,
html body.page-tab-assistant:not(.page-tab-xhs-master) .tab-bar {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 8px 2px max(4px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
}

/* 创作/智能体内层勿再套第二层 max-width，避免比「我的」窄 */
html body.page-tab-create .lh2-page,
html body.page-tab-create .lh-new-home,
html body.page-tab-create .create-dash__inner,
html body.page-tab-agent #agentToolsRoot .lh2-page,
html body.page-tab-agent #agentToolsRoot .create-dash,
html body.page-tab-agent #agentToolsRoot .create-dash__inner {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

html body.page-tab-mine .mine-layout,
html body.page-tab-mine .mine-page-zoom {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 「我的」：整页滚动 + 固定底栏（避免 #mainContent flex 塌陷白屏） */
html body.page-tab-mine {
    min-height: 100vh;
    min-height: 100dvh;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) calc(68px + env(safe-area-inset-bottom, 0)) env(safe-area-inset-left, 0) !important;
    box-sizing: border-box !important;
}

html body.page-tab-mine .app-container,
html body.page-tab-mine #mainContent.main-content,
html body.page-tab-mine .main-content {
    flex: none !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
}

html body.page-tab-mine .mine-page-zoom,
html body.page-tab-mine .mine-layout {
    display: block !important;
    width: 100% !important;
    min-height: 1px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body.page-tab-mine .tab-bar {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 12000 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body.page-tab-mine::before,
html body.page-tab-mine::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 文案保持与创作首页一致 12px，仅防换行 */
html body .tab-bar a.tab-item--nav-create .tab-label,
html body .tab-bar a.tab-item--nav-mine .tab-label,
html body .tab-bar a.tab-item--nav-gzh .tab-label,
html body .tab-bar a.tab-item--nav-assistant .tab-label,
html body .tab-bar a.tab-item--nav-xhs-master .tab-label,
html body .tab-bar a.tab-item--nav-aichat .tab-label {
    font-size: 12px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* 底栏 / 返回：跳转中只锁底栏，避免整页 pointer-events:none 造成「假死」感 */
html.h5-nav-pending body {
    cursor: progress;
}
html.h5-nav-pending .tab-bar {
    pointer-events: none;
}
/* 不再把未选中项变灰——会让人觉得卡住了 */
html.h5-nav-pending .tab-bar a.tab-item:not(.active),
html.h5-nav-pending .tab-bar a.tab-item.active {
    opacity: 1;
}
.h5-nav-loader {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, var(--h5-app-max-width, 430px));
    height: 3px;
    z-index: 20000;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.08s ease;
    background: rgba(99, 102, 241, 0.12);
}
html.h5-nav-pending .h5-nav-loader {
    opacity: 1;
}
.h5-nav-loader > i {
    display: block;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #bd3c25 30%, #e85d3f 70%, transparent);
    animation: h5NavLoaderSlide 0.7s ease-in-out infinite;
}
@keyframes h5NavLoaderSlide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}