/**
 * 计划模式的 plan.md（js/ai-plan-file.js）：对话里的文件卡片 + 右侧预览抽屉的阅读形态。
 *
 * 抽屉外壳就是「AI 写知识库」的变更预览抽屉（.ai-kb-diff-overlay / .ai-kb-diff-drawer，ai-kb-draft.css），
 * 安全区、软键盘、主屏幕应用的几条规则都挂在那个类上，这里只用修饰类 .ai-kb-diff-drawer--doc 换成阅读宽度。
 * 颜色一律取 --kb-* 变量（写之前已确认都有定义）。加载在 ai-kb-draft.css 之后。
 */

/* ---------------- 气泡里的文件卡片 ---------------- */

/* 计划的正文不进气泡：卡片就是它的全部呈现（复制 / 加入知识库仍取 plan.md 原文） */
.ai-message-content.ai-message-content--plan {
    display: none;
}

.ai-plan-file {
    margin-top: 10px;
    border: 1px solid var(--kb-paper-line);
    border-radius: 10px;
    background: var(--kb-paper-panel);
    overflow: hidden;
}

/* 气泡里只有这张卡片时（正文藏起来了）不需要上边距 */
.message-bubble > .ai-message-content--plan:first-child + .ai-plan-file,
.message-bubble > .ai-plan-file:first-child {
    margin-top: 0;
}

/* 整张卡片点了都打开预览（可预览的状态下）；卡片里的按钮各有各的指针样式 */
.ai-plan-file--clickable {
    cursor: pointer;
}

@media (any-hover: hover) {
    .ai-plan-file--clickable:hover:not(:where(html[data-kb-pointer="touch"] *)) {
        border-color: var(--kb-accent-soft);
    }
}

.ai-plan-file-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.ai-plan-file-head.is-clickable {
    cursor: pointer;
}

@media (any-hover: hover) {
    .ai-plan-file-head.is-clickable:hover:not(:where(html[data-kb-pointer="touch"] *)) {
        background: var(--kb-active-bg);
    }
}

.ai-plan-file-head:focus-visible:where(html:not(.kb-focus-pointer) *) {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--kb-accent-soft);
}

.ai-plan-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--kb-active-bg);
    color: var(--kb-accent-strong);
    font-size: 17px;
}

.ai-plan-file-spin {
    animation: ai-plan-file-spin 1s linear infinite;
}

@keyframes ai-plan-file-spin {
    to { transform: rotate(360deg); }
}

.ai-plan-file-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.ai-plan-file-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--kb-ink);
}

.ai-plan-file-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--kb-ink-muted);
    font-variant-numeric: tabular-nums;
}

.ai-plan-file-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.ai-plan-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 28px;
    padding: 0 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--kb-accent-strong);
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.ai-plan-file-btn i {
    font-size: 15px;
}

@media (any-hover: hover) {
    .ai-plan-file-btn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
        background: var(--kb-active-bg-strong);
    }
}

/* 间距用 margin 不用 padding：-webkit-line-clamp 只按行数截断内容区，下内边距那一截照样画出第三行的上半截 */
.ai-plan-file-goal {
    margin: 0 12px 8px;
    color: var(--kb-ink-soft);
    font-size: 13px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 窄屏一行放不下几个字，两行只够看个开头；目标本身最多 120 字（goalOf 已截），整段放出来 */
@media (max-width: 1023px) {
    .ai-plan-file-goal {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
        overflow-wrap: anywhere;
    }
}

.ai-plan-file-progress {
    padding: 0 12px 8px;
}

.ai-plan-file-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--kb-active-bg);
    overflow: hidden;
}

.ai-plan-file-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--kb-accent);
    transition: width 0.3s ease;
}

.ai-plan-file-todos {
    margin: 0;
    padding: 2px 12px 6px;
    list-style: none;
}

.ai-plan-file-todo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kb-ink);
}

.ai-plan-file-todo i {
    flex-shrink: 0;
    position: relative;
    top: var(--kb-icon-optical-shift, 0.06em);
    font-size: 15px;
    line-height: 1.5;
    color: var(--kb-ink-muted);
}

.ai-plan-file-todo span {
    min-width: 0;
    word-break: break-word;
}

.ai-plan-file-todo--completed i {
    color: var(--kb-accent);
}

.ai-plan-file-todo--completed span,
.ai-plan-file-todo--cancelled span {
    color: var(--kb-ink-muted);
}

.ai-plan-file-todo--cancelled span {
    text-decoration: line-through;
}

.ai-plan-file-todo--in_progress i {
    color: var(--kb-accent-strong);
    animation: ai-plan-file-spin 1s linear infinite;
}

.ai-plan-file-todo--in_progress span {
    font-weight: 600;
}

.ai-plan-file-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 12px 8px 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--kb-accent-strong);
    font-size: 12px;
    cursor: pointer;
}

.ai-plan-file-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 12px 10px;
    color: var(--kb-ink-muted);
    font-size: 12px;
    line-height: 1.55;
}

.ai-plan-file-stub-count {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--kb-active-bg);
    color: var(--kb-ink-soft);
    font-size: 11px;
    line-height: 1.7;
}

.ai-plan-file-link {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--kb-accent-strong);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

/* 「开发计划」徽标 + 「执行此计划」：样式本体在 ai-search.css（.ai-plan-actions），这里只把它收进卡片底部 */
.ai-plan-file .ai-plan-actions {
    margin-top: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--kb-paper-line);
    background: var(--kb-paper-soft);
}

/* ---------------- 预览抽屉 ---------------- */

/* 阅读宽度与「新增知识库」的编辑器抽屉一致：桌面 70%，窄屏全宽（宽度只写一处，关闭态的 right 由它算出） */
.ai-kb-diff-drawer.ai-kb-diff-drawer--doc {
    --kb-diff-drawer-width: 70vw;
}

@media (max-width: 1023px) {
    .ai-kb-diff-drawer.ai-kb-diff-drawer--doc {
        --kb-diff-drawer-width: 100%;
    }
}

.ai-plan-preview-stat {
    font-size: 12px;
    color: var(--kb-ink-muted);
    font-variant-numeric: tabular-nums;
}

.ai-plan-preview-tabs {
    gap: 22px;
}

.ai-plan-preview-meta {
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--kb-ink-muted);
}

.ai-plan-preview-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* 正文右侧的「回到顶部 / 回到底部」：形状与聊天消息区的 .ai-scroll-jump 一致（外观在 styles/index.css 的
   .kb-scroll-jump-btn）。抽屉本身是 fixed，这里按抽屉定位；top 由 AiPlanFile._bindPreviewJump 现量，
   垂直居中于滚动区 */
.ai-plan-preview-jump {
    position: absolute;
    right: 20px;
    transform: translateY(-50%);
    z-index: var(--kb-z-scroll-jump, 20);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-plan-preview-jump[hidden] {
    display: none;
}

.ai-plan-preview-rich {
    max-width: 880px;
    min-width: 0;
    margin: 0 auto;
    padding: 20px 28px 48px;
}

/*
 * 引用块里的空白（V3.187）：.knowledge-content blockquote 是 pre-wrap（给 Quill 的缩进用），而这里的正文是
 * marked 直出的 HTML，标签之间的换行会变成一行行空白，「> 版本…」这类多行引用被撑得很开。与 AI 气泡同一个处理
 */
.ai-plan-preview-rich blockquote {
    white-space: normal;
}

.ai-plan-source {
    margin: 0;
    padding: 20px 28px 48px;
    background: transparent;
    color: var(--kb-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-plan-source code {
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.ai-plan-preview-empty {
    display: none;
    padding: 48px 24px;
    text-align: center;
    color: var(--kb-ink-muted);
    font-size: 13px;
}

/* 富文本里的待办：清洗规则不放行 <input>，复选框换成只读图标（ai-plan-file.js _renderRich） */
.ai-plan-preview-rich li.ai-plan-check-item {
    list-style: none;
}

.ai-plan-preview-rich li.ai-plan-check-item::before,
.ai-plan-preview-rich li.ai-plan-check-item::marker {
    content: none;
}

.ai-plan-check {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -0.12em;
    border: 1.5px solid var(--kb-ink-muted);
    border-radius: 4px;
}

/* 已完成：实心方框里一个对勾（此前只是内缩一圈的实心块，看不出「勾上了」） */
.ai-plan-check.is-checked {
    border-color: var(--kb-accent);
    background: var(--kb-accent);
}

.ai-plan-check.is-checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0.24em;
    height: 0.48em;
    border: solid var(--kb-paper);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 已取消：实心方框里一道横线 */
.ai-plan-check.is-cancelled {
    border-color: var(--kb-ink-muted);
    background: var(--kb-ink-muted);
}

.ai-plan-check.is-cancelled::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.5em;
    height: 2px;
    background: var(--kb-paper);
    transform: translate(-50%, -50%);
}

/* 转圈时不画勾 / 横线（执行中的那一项可能还带着 is-checked 之前的状态） */
.ai-plan-check.is-running::after {
    content: none;
}

.ai-plan-check.is-running {
    /* 全站统一的一圈珠子（css/loading.css 的 --kb-spinner-beads） */
    border-color: transparent;
    background: var(--kb-spinner-beads);
    color: var(--kb-accent-strong);
    animation: kb-loading-beads 0.96s steps(8, end) infinite;
}

@media (max-width: 1023px) {
    .ai-plan-preview-rich,
    .ai-plan-source {
        padding: 16px 16px 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-plan-file-spin,
    .ai-plan-file-todo--in_progress i,
    .ai-plan-check.is-running {
        animation: none;
    }
}