/**
 * AI 模式的「主页」（js/layout-mode.js + js/ai-home.js，docs/ai-home-layout-V1.0.md）
 *
 * 两个 body 类：
 *   - body.kb-layout-ai     整个应用在 AI 模式：侧栏露出「主页」、悬浮球藏起来、助手是主页形态；
 *   - body.kb-ai-home-mode  正停在主页上（NavigationManager.VIEW_MODE_CLASSES['ai-home']）。
 * 两者都由 <body> 开头的预初始化脚本在首帧前挂上，启动时不会先闪一下知识列表与悬浮球。
 *
 * 主页就是 #aiDrawer 挂上 .ai-drawer--embedded：仍是 body 下的 position: fixed，只是不再从右侧滑出，
 * 而是贴着左侧菜单铺满其余区域。不搬进 #mainContentArea 是刻意的——fixed 的包含块、软键盘
 * （reading-theme.css 的 html.kb-keyboard-open .ai-drawer）、顶部 / 左右安全区那几条规则都按「body 下的
 * fixed 整屏容器」写好了，搬进去每一条都要重写一遍。
 */

/* ------------------------------------------------------------
 * 侧栏「主页」菜单项
 * ------------------------------------------------------------ */
/*
 * 按钮带 hidden 属性（index.html 里有注释）：Tailwind 的 .space-y-2 按 :not([hidden]) 排间距，
 * 于是露出来时它与「知识库」之间没有间距，这里自己补上那 0.5rem
 */
/* 必须 !important：按钮上的 Tailwind `flex` 工具类会压过 [hidden] 的 display: none */
.btn-nav.ai-home-nav {
    position: relative;
    display: none !important;
}

body.kb-layout-ai .btn-nav.ai-home-nav {
    display: flex !important;
    margin-bottom: 0.5rem;
}

/* 跑完没看的 AI 任务（与悬浮球角标同一个数，AiFloatTrigger.syncBadge 切 hidden） */
.ai-home-nav-dot {
    width: 7px;
    height: 7px;
    margin-left: auto;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--color-error, #ef4444);
    flex-shrink: 0;
}

.ai-home-nav-dot[hidden] {
    display: none;
}

/* AI 模式下悬浮球整个不出现：主页取代了它（完成提醒改成 toast + 上面那颗小红点） */
body.kb-layout-ai .ai-trigger-dock {
    display: none !important;
}

/* ------------------------------------------------------------
 * 停在主页上：顶栏、列表与移动端的搜索条 / 分页条都让出来
 * ------------------------------------------------------------ */
body.kb-ai-home-mode #topNav,
body.kb-ai-home-mode .knowledge-area,
body.kb-ai-home-mode .mobile-search-bar,
body.kb-ai-home-mode .mobile-pagination-bar {
    display: none !important;
}

/* ------------------------------------------------------------
 * 主页形态的助手
 * ------------------------------------------------------------ */
.ai-drawer.ai-drawer--embedded {
    top: 0;
    right: 0;
    left: var(--kb-sidebar-width, 306px);
    width: auto;
    max-width: none;
    /* 网页版桌面布局的底部有一条 30px 的备案栏（css/beian.css），主页是落地页，不盖住它 */
    height: calc(var(--kb-vh, 100dvh) - 30px);
    /* 压在左侧菜单（z 40）与它的贴边收起键（41）下面，盖住主内容区；窄屏的覆盖式菜单（9999）自然在上面 */
    z-index: 39;
    box-shadow: none;
    /* 不在主页时收到屏外（scrollTop 留着，回来时还在原处）；左侧菜单收起 / 展开时跟着滑 */
    transform: translateX(100%);
    visibility: hidden;
    transition: left 0.3s ease-in-out;
}

body.kb-ai-home-mode .ai-drawer.ai-drawer--embedded {
    transform: none;
    visibility: visible;
}

body.sidebar-collapsed .ai-drawer.ai-drawer--embedded,
body.kb-layout-instant .ai-drawer.ai-drawer--embedded {
    transition: none;
}

@media (min-width: 1024px) {
    body.sidebar-collapsed .ai-drawer.ai-drawer--embedded {
        left: 0;
        transition: left 0.3s ease-in-out;
    }
}

/* 没有备案栏的地方铺满：会话全屏、主屏幕应用、桌面端 */
body.kb-ai-home-fullscreen .ai-drawer.ai-drawer--embedded,
body.pwa-mode .ai-drawer.ai-drawer--embedded,
html.kb-standalone .ai-drawer.ai-drawer--embedded,
.kb-desktop .ai-drawer.ai-drawer--embedded {
    height: var(--kb-vh, 100dvh);
}

@media (display-mode: standalone) {
    .ai-drawer.ai-drawer--embedded {
        height: var(--kb-vh, 100dvh);
    }
}

@media (max-width: 1023px) {
    /*
     * 窄屏：左侧菜单是覆盖式的，主页铺满整屏宽。底部同样给手机网页版的备案条（.mobile-beian-bar，30px + 指示条）
     * 让位——与工具 / 图谱等全局视图同一个口径；主屏幕应用里没有备案条，下面那组规则铺满
     */
    .ai-drawer.ai-drawer--embedded {
        left: 0;
        height: calc(var(--kb-vh, 100dvh) - 30px - env(safe-area-inset-bottom, 0px));
    }

    body.pwa-mode .ai-drawer.ai-drawer--embedded,
    html.kb-standalone .ai-drawer.ai-drawer--embedded,
    .kb-desktop .ai-drawer.ai-drawer--embedded {
        height: var(--kb-vh, 100dvh);
    }
}

@media (display-mode: standalone) and (max-width: 1023px) {
    .ai-drawer.ai-drawer--embedded {
        height: var(--kb-vh, 100dvh);
    }
}

/* 嵌入形态下没有「拖图进来」以外的覆盖层；抽屉的遮罩永远不出现 */
body.kb-layout-ai .ai-drawer-overlay {
    display: none;
}

/* ------------------------------------------------------------
 * 标题栏：抽屉形态与主页形态各露各的
 *
 * 主页形态照「知识库」顶栏（#topNav）的版式：同一个 64px 高、标题在所有宽度下居中、字号字重相同；
 * 刷新键也放在顶栏放它的位置——主屏幕应用在左边主菜单键旁（与 #refreshDataBtn 一样各宽度都在），
 * 桌面端在右边主题开关之后（与 #desktopRefreshBtn 一样）。
 * ------------------------------------------------------------ */
.ai-drawer .ai-home-menu-btn,
.ai-drawer .ai-home-refresh-btn,
.ai-drawer .ai-home-session-title,
.ai-drawer .ai-home-actions,
.ai-drawer .ai-home-desktop-refresh-btn {
    display: none;
}

.ai-drawer--embedded .ai-drawer-title-text,
.ai-drawer--embedded .ai-drawer-close {
    display: none !important;
}

.ai-drawer--embedded .ai-home-session-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 主页是一个会话页：标题就是会话名，不再顶着产品图标 */
.ai-drawer--embedded .ai-drawer-title > i {
    display: none;
}

/*
 * 标题块绝对居中，左右各让出两侧按钮里**宽的那一边**，才能真正落在正中又不压住按钮。
 * 让位 = 标题栏内边距 + 那一侧按钮组的宽度（32px 圆钮、组内 0.5rem 间距；主题开关 64px），
 * 下面按断点 / 端改这几个量，宽度只在一处算。
 */
.ai-drawer.ai-drawer--embedded .ai-drawer-header {
    --ai-home-pad-l: 16px;
    --ai-home-pad-r: 16px;
    --ai-home-lead-btns: 0px;
    --ai-home-trail-btns: 64px;
    position: relative;
    box-sizing: border-box;
    min-height: 64px;
    justify-content: flex-start;
    gap: 0.5rem;
}

.kb-desktop .ai-drawer.ai-drawer--embedded .ai-drawer-header {
    --ai-home-trail-btns: calc(64px + 0.5rem + 32px);
}

/*
 * 底色与「知识库」顶栏（#topNav，reading-theme.css）同一种材质：纸面面板色 88% + 毛玻璃，底边一条纸面分隔线。
 * 此前用的是对话区的纸面色（夜间 #1f211f），比其它模块的导航栏深一档。
 * 选择器带 .kb-paper-app 并多一层类，才压得住 reading-theme.css 里 `[data-theme="dark"] .kb-paper-app .ai-drawer-header` 的 !important
 */
.kb-paper-app .ai-drawer.ai-drawer--embedded .ai-drawer-header {
    background: color-mix(in srgb, var(--kb-paper-panel) 88%, transparent) !important;
    border-bottom: 1px solid var(--kb-paper-line) !important;
    backdrop-filter: blur(16px) saturate(1.08);
}

/*
 * 主屏幕应用的刷新：与顶栏 #refreshDataBtn 一样**各宽度都在**（iPad 横屏也有），排在主菜单键（仅 <1024px）之后。
 * 宽屏时左边只有它一颗
 */
body.pwa-mode .ai-drawer.ai-drawer--embedded .ai-home-refresh-btn,
html.kb-standalone .ai-drawer.ai-drawer--embedded .ai-home-refresh-btn {
    display: inline-flex;
}

body.pwa-mode .ai-drawer.ai-drawer--embedded .ai-drawer-header,
html.kb-standalone .ai-drawer.ai-drawer--embedded .ai-drawer-header {
    --ai-home-lead-btns: 32px;
}

/* PC 网页版：主题开关左边还有「下载桌面端」（js/desktop-download.js，只在 ≥1024px 显示，与知识库顶栏同一颗） */
@media (min-width: 1024px) {
    .ai-drawer.ai-drawer--embedded .ai-drawer-header:has(.kb-download-btn) {
        --ai-home-trail-btns: calc(32px + 0.5rem + 64px);
    }
}

.ai-drawer.ai-drawer--embedded .ai-drawer-header .editor-header-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2 * (max(var(--ai-home-pad-l) + var(--ai-home-lead-btns), var(--ai-home-pad-r) + var(--ai-home-trail-btns) + var(--ai-home-fullscreen-room, 0px)) + 0.5rem));
    justify-content: center;
}

/* 与 #currentPageTitle 同一档：text-lg（1.125rem / 1.75rem）+ font-semibold */
.ai-drawer.ai-drawer--embedded .ai-drawer-header .ai-drawer-title {
    justify-content: center;
    max-width: 100%;
    margin-right: 0;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    text-align: center;
}

/* 与顶栏右侧按钮组同一个间距（Tailwind 的 gap-2） */
.ai-drawer--embedded .ai-home-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.ai-home-fullscreen-btn.kb-header-icon-btn {
    display: none;
}

@media (min-width: 1024px) {
    .ai-drawer--embedded .ai-drawer-header {
        --ai-home-fullscreen-room: calc(32px + 0.5rem);
    }

    .ai-drawer--embedded .ai-home-fullscreen-btn {
        display: inline-flex;
    }

    /* 会话全屏只收起两级侧栏，沿用普通布局与边缘开合按钮，不另加标题栏或改变页面高度。 */
    body.kb-layout-instant .ai-drawer--embedded .ai-session-sidebar,
    body.kb-layout-instant .ai-drawer--embedded .ai-sidebar-toggle,
    body.kb-layout-instant .ai-drawer.ai-drawer--embedded {
        transition: none !important;
    }

}

.kb-desktop .ai-drawer--embedded .ai-home-desktop-refresh-btn {
    display: inline-flex;
}

.ai-home-refresh-btn[disabled] i,
.ai-home-refresh-btn .refresh-rotating,
.ai-home-desktop-refresh-btn[disabled] i,
.ai-home-desktop-refresh-btn .refresh-rotating {
    animation: kb-loading-spin 0.9s linear infinite;
}

/* macOS 桌面端收起左侧菜单后，主页标题栏顶到窗口左上角：给红绿灯让位（展开时它们落在侧栏上） */
.kb-desktop-mac:not(.kb-desktop-fullscreen) body.sidebar-collapsed .ai-drawer--embedded .ai-drawer-header {
    --ai-home-pad-l: 84px;
    padding-left: 84px;
}

@media (max-width: 1023px) {
    /*
     * 主页没有顶栏，#menuToggle 不在：主菜单从这里开；主屏幕应用的刷新紧挨着它（顶栏左组同一个次序）。
     * 特异度要压过 nav-controls.css 的 .kb-header-icon-btn
     */
    .ai-drawer.ai-drawer--embedded .ai-drawer-header {
        --ai-home-pad-l: 8px;
        --ai-home-pad-r: 8px;
        --ai-home-lead-btns: 32px;
    }

    .ai-drawer.ai-drawer--embedded .ai-home-menu-btn {
        display: inline-flex;
    }

    body.pwa-mode .ai-drawer.ai-drawer--embedded .ai-drawer-header,
    html.kb-standalone .ai-drawer.ai-drawer--embedded .ai-drawer-header {
        --ai-home-lead-btns: calc(32px + 0.5rem + 32px);
    }

}

/* 手机（≤720px）：左边再多一颗会话列表键（主菜单 → [刷新] → 会话列表） */
@media (max-width: 720px) {
    .ai-drawer.ai-drawer--embedded .ai-drawer-header {
        --ai-home-lead-btns: calc(32px + 0.5rem + 32px);
    }

    body.pwa-mode .ai-drawer.ai-drawer--embedded .ai-drawer-header,
    html.kb-standalone .ai-drawer.ai-drawer--embedded .ai-drawer-header {
        --ai-home-lead-btns: calc(3 * 32px + 2 * 0.5rem);
    }
}


@media (max-width: 720px) {
    /*
     * 覆盖式会话列表（ai-search.css 的 ≤720px 段）按整屏高画；主页给备案条留了底，列表也要跟着留，
     * 否则列表末尾（「加载更多」）压在备案条下面。键盘弹起时交还给 reading-theme.css 的软键盘规则
     */
    html:not(.kb-keyboard-open) .ai-drawer.ai-drawer--embedded .ai-session-sidebar {
        bottom: auto;
        height: calc(var(--kb-vh, 100dvh) - 30px - env(safe-area-inset-bottom, 0px));
    }

    html:not(.kb-keyboard-open) body.pwa-mode .ai-drawer.ai-drawer--embedded .ai-session-sidebar,
    html.kb-standalone:not(.kb-keyboard-open) .ai-drawer.ai-drawer--embedded .ai-session-sidebar,
    html.kb-desktop:not(.kb-keyboard-open) .ai-drawer.ai-drawer--embedded .ai-session-sidebar {
        height: var(--kb-vh, 100dvh);
    }
}

/* ------------------------------------------------------------
 * 主页上的会话 / 项目列表：夹在左侧菜单与对话区中间的一档（2026-11-05）
 *
 * V1.15 起列表整块透明、与对话区同一张纸，结果三栏里只有左侧菜单自成一块，列表和对话区糊在一起。
 * 现在列表铺一层半透明的面板色（--ai-home-list-bg，55%）：左侧菜单（面板色 88%）最亮 → 列表居中 → 对话区露纸纹，
 * 三块由浅到深一档一档过渡，纸纹在列表上仍隐约透出来。以下是 V1.15 的原始说明，「透明」那部分已被这一档取代：
 *
 * 抽屉形态下列表比对话区低一档（--kb-paper-soft），那是给「右侧滑出的窄抽屉」分区用的；
 * 主页铺满整屏时，它夹在更浅的左侧菜单与对话区之间成了三栏里最深的一块，上面还压着通栏的标题栏。
 * 这里只在主页形态、非覆盖式（> 720px）时把它换成与标题栏、对话区同一张纸，分区只靠右侧那一条细线；
 * 列表里的凹槽描边、选中行的描边一起收掉，层次只留填充色；「新对话」与搜索框之间那条分隔线保留
 * （它把「操作区」与「列表区」分开，收掉之后搜索框像是贴在按钮下面）。
 * 选择器多带一层 .ai-drawer--embedded：reading-theme.css 的同名规则带 !important，要靠特异度压过去。
 * ≤720px 的覆盖式列表盖在对话区上，仍需要低一档的底色把它与下面的内容分开，保持原样。
 * ------------------------------------------------------------ */
@media (min-width: 721px) {
    .kb-paper-app .ai-drawer--embedded .ai-session-sidebar,
    .kb-paper-app .ai-drawer--embedded .ai-session-sidebar-header,
    .kb-paper-app .ai-drawer--embedded .ai-session-list,
    /* 夜间那条（写死 #20221d）本身就多一个 [data-theme]，这里同样要多一个才压得住 */
    [data-theme="dark"] .kb-paper-app .ai-drawer--embedded .ai-session-sidebar,
    [data-theme="dark"] .kb-paper-app .ai-drawer--embedded .ai-session-sidebar-header,
    [data-theme="dark"] .kb-paper-app .ai-drawer--embedded .ai-session-list {
        background: transparent !important;
    }

    .kb-paper-app .ai-drawer--embedded,
    [data-theme="dark"] .kb-paper-app .ai-drawer--embedded {
        --ai-home-list-bg: color-mix(in srgb, var(--kb-paper-panel) 55%, transparent);
    }

    .kb-paper-app .ai-drawer--embedded .ai-session-sidebar,
    [data-theme="dark"] .kb-paper-app .ai-drawer--embedded .ai-session-sidebar {
        background: var(--ai-home-list-bg) !important;
    }

    .kb-paper-app .ai-drawer--embedded .ai-mode-tabs {
        background: var(--kb-active-bg);
        border-color: transparent;
    }

    .kb-paper-app .ai-drawer--embedded .ai-new-chat-btn,
    .kb-paper-app .ai-drawer--embedded .ai-session-item.active,
    .kb-paper-app .ai-drawer--embedded .ai-project-item.active {
        border-color: transparent !important;
    }

    /* 悬浮按钮组是不透明浮层，底色要与「悬浮蒙层叠在列表底色上」的实色一致（比例同 --kb-active-bg-strong 的 alpha） */
    .kb-paper-app .ai-drawer--embedded .ai-session-item,
    .kb-paper-app .ai-drawer--embedded .ai-session-item.active,
    .kb-paper-app .ai-drawer--embedded .ai-project-item {
        --ai-session-actions-bg: color-mix(in srgb, var(--kb-accent) 16%, color-mix(in srgb, var(--kb-paper-panel) 55%, var(--kb-paper)));
    }

    [data-theme="dark"] .kb-paper-app .ai-drawer--embedded .ai-session-item,
    [data-theme="dark"] .kb-paper-app .ai-drawer--embedded .ai-session-item.active,
    [data-theme="dark"] .kb-paper-app .ai-drawer--embedded .ai-project-item {
        --ai-session-actions-bg: color-mix(in srgb, var(--kb-accent) 18%, color-mix(in srgb, var(--kb-paper-panel) 55%, var(--kb-paper)));
    }
}

/* ------------------------------------------------------------
 * 主屏幕应用的状态栏那一段（V1.15）
 *
 * 知识库顶栏（#topNav）自己向上长出 --kb-safe-top，状态栏与导航栏是同一块面；主页此前是**抽屉容器**让出
 * 这一段（reading-theme.css「顶部安全区」对 .ai-drawer 的 padding-top），那一段露的是容器底色，与下面的标题栏
 * 不是一个颜色。主页形态改成标题栏自己接管：容器不让，标题栏把内边距与最小高度各加一份安全区，
 * 绝对居中的标题块从安全区下沿算起。其它环境 --kb-safe-top 为 0，这几条是空转
 * ------------------------------------------------------------ */
.ai-drawer.ai-drawer--embedded {
    padding-top: 0;
}

.ai-drawer.ai-drawer--embedded .ai-drawer-header {
    padding-top: calc(0.75rem + var(--kb-safe-top, 0px));
    min-height: calc(64px + var(--kb-safe-top, 0px));
}

.ai-drawer.ai-drawer--embedded .ai-drawer-header .editor-header-content {
    top: var(--kb-safe-top, 0px);
}

/* ------------------------------------------------------------
 * 内容区纸纹（V1.15）：与知识库详情同一张纸——容器不画底色，露出 body.kb-paper-app 的纸纹
 *
 * 抽屉、对话区、消息区、输入区底座在 reading-theme.css 里是实色纸面（夜间 #1f211f），把纹理盖住了；
 * 主页形态下一律透明（输入框、气泡、卡片自己的底色不动）。选择器多一层类 / 带 body，才压得住
 * reading-theme.css 里 `[data-theme="dark"] .kb-paper-app .ai-drawer…` 的 !important。
 * 知识库模式的抽屉（盖在页面上的窄抽屉）仍要实色，不受影响；≤720px 覆盖式会话列表同理（上面那段只管 >720px）。
 * ------------------------------------------------------------ */
body.kb-paper-app .ai-drawer.ai-drawer--embedded,
.kb-paper-app .ai-drawer.ai-drawer--embedded .ai-drawer-body,
.kb-paper-app .ai-drawer.ai-drawer--embedded .ai-chat-panel,
.kb-paper-app .ai-drawer.ai-drawer--embedded .ai-chat-messages,
.kb-paper-app .ai-drawer.ai-drawer--embedded .ai-drawer-footer {
    background: transparent !important;
}

/* ------------------------------------------------------------
 * 软键盘（V1.16）：与知识库模式的抽屉同一套——键盘开着时钉到可视区（top 跟 visualViewport.offsetTop、高度取可视区高）
 *
 * reading-theme.css 的 `html.kb-keyboard-open .ai-drawer`（特异度 0,2,1）压不过上面主屏幕应用那组
 * `body.pwa-mode / html.kb-standalone .ai-drawer.ai-drawer--embedded { height: var(--kb-vh) }`（0,3,1）：
 * 主屏幕应用里主页的抽屉键盘弹起后仍是整屏高，输入框压在键盘后面。这里按嵌入形态再写一遍、特异度压过它们
 * （0,3,2）；底部安全区的让位同样收掉（指示条被键盘盖着）
 * ------------------------------------------------------------ */
html.kb-keyboard-open body .ai-drawer.ai-drawer--embedded {
    top: var(--kb-vv-top, 0px);
    height: var(--kb-vv-height, var(--kb-vh, 100dvh));
    padding-bottom: 0;
    --ai-safe-bottom: 0px;
}