/*
 * AI 写知识库的授权卡片与差异预览抽屉。
 *
 * 视觉语汇沿用 ai-search.css 里的工具卡片与确认浮层：同一条链路上的东西，
 * 用户不该因为换了个功能就要重新认一遍界面。
 */

/* ============================== 草稿卡片 ============================== */

.ai-kb-draft-card {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.05);
    font-size: 13px;
    line-height: 1.6;
    color: #1f2937;
}

.ai-kb-draft-card--applied {
    border-color: rgba(22, 163, 74, 0.3);
    background: rgba(22, 163, 74, 0.06);
}

.ai-kb-draft-card--dismissed {
    border-color: rgba(107, 114, 128, 0.28);
    background: rgba(107, 114, 128, 0.06);
}

.ai-kb-draft-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ai-kb-draft-icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.4;
    color: #2563eb;
}

.ai-kb-draft-card--applied .ai-kb-draft-icon { color: var(--kb-diff-add-fg); }
.ai-kb-draft-card--dismissed .ai-kb-draft-icon { color: #6b7280; }

.ai-kb-draft-heading {
    min-width: 0;
    flex: 1;
}

.ai-kb-draft-action {
    font-size: 12px;
    color: #6b7280;
}

.ai-kb-draft-title {
    font-weight: 600;
    /* 标题可能很长，卡片不该被它撑破 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 模型写的一句总体说明。它不是变更项，所以不进那张列表，也不参与「还有 N 项」的计数 */
.ai-kb-draft-note {
    margin: 8px 0 0;
    color: #374151;
}

.ai-kb-draft-summary {
    margin: 8px 0 0;
    padding-left: 1.5em;
    color: #374151;
}

.ai-kb-draft-summary li { margin: 2px 0; }

.ai-kb-draft-summary-more {
    list-style: none;
    margin-left: -1.5em;
    color: #6b7280;
}

/* 流式期间的折叠态：只说清「有一份草稿在等你」，不给任何可点的写入按钮 */
.ai-kb-draft-card--collapsed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.ai-kb-draft-card--collapsed .ai-kb-draft-icon {
    font-size: 15px;
}

.ai-kb-draft-collapsed-text {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-kb-draft-collapsed-hint {
    flex-shrink: 0;
    font-size: 12px;
    color: #6b7280;
}

.ai-kb-draft-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 12px;
    color: #b45309;
}

.ai-kb-draft-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.ai-kb-draft-spacer { flex: 1; }

.ai-kb-draft-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

/* 禁用态走统一的控件禁用色，不用 opacity 压暗整颗按钮：
   降透明度会把里面的文字也一起冲淡到读不清（全站同一条约定，scripts/test.js 锁着） */
.ai-kb-draft-btn:disabled {
    border-color: var(--kb-control-disabled-border, rgba(107, 114, 128, 0.2));
    background: var(--kb-control-disabled-bg, #f3f4f6);
    color: var(--kb-control-disabled-text, #6b7280);
    cursor: not-allowed;
}

.ai-kb-draft-btn--primary {
    background: #2563eb;
    color: #fff;
}

.ai-kb-draft-btn--primary:hover:not(:disabled) { background: #1d4ed8; }

.ai-kb-draft-btn--ghost {
    background: transparent;
    border-color: rgba(37, 99, 235, 0.35);
    color: #2563eb;
}

.ai-kb-draft-btn--ghost:hover:not(:disabled) { background: rgba(37, 99, 235, 0.1); }

.ai-kb-draft-btn--text {
    background: transparent;
    color: #6b7280;
}

.ai-kb-draft-btn--text:hover:not(:disabled) { color: #374151; }

.ai-kb-draft-final {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
}

.ai-kb-draft-final--ok { color: var(--kb-diff-add-fg); }
.ai-kb-draft-final--off { color: #6b7280; }

.ai-kb-draft-link {
    padding: 0;
    border: none;
    background: transparent;
    color: #2563eb;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.ai-kb-draft-spin {
    display: inline-block;
    animation: ai-kb-draft-spin 0.9s linear infinite;
}

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

/* ============================== 差异预览 ============================== */

/*
 * 遮罩必须压过 AI 助手抽屉（2001）与编辑器（2200）：这颗「查看变更」是在 AI 抽屉
 * 开着的时候点的，层级反了用户点了按钮就像什么都没发生。
 */
.ai-kb-diff-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: var(--kb-scrim-bg);
    backdrop-filter: blur(var(--kb-scrim-blur));
    -webkit-backdrop-filter: blur(var(--kb-scrim-blur));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-kb-diff-overlay.active { opacity: 1; }

/*
 * 右侧抽屉，几何与开合节奏对齐 .editor-panel（css/editor.css）。
 *
 * 宽度只写一处，关闭态的 right 由它取负算出——.ai-drawer 那段注释记着教训：
 * width 和 right 各写死一个数，调宽度时漏改一个，抽屉就关不干净、右缘留一条。
 * 上界比 AI 抽屉的 1200px 宽，分栏后每侧才有够读一行中文的宽度。
 */
.ai-kb-diff-drawer {
    --kb-diff-drawer-width: clamp(1000px, 90vw, 1440px);
    position: fixed;
    top: 0;
    right: calc(-1 * var(--kb-diff-drawer-width));
    width: var(--kb-diff-drawer-width);
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
    /* 字色要自己声明：抽屉挂在 body 下、不在气泡里，继承来的颜色未必跟得上主题，
       暗色下正文会留在深灰上读不出来 */
    color: var(--text-primary, #1f2937);
    border-left: 1px solid var(--border-color, #e5e7eb);
    box-shadow: -4px 0 20px rgba(15, 23, 42, 0.18);
    transition: right 0.3s ease;
    overflow: hidden;
}

.ai-kb-diff-overlay.active .ai-kb-diff-drawer { right: 0; }

/*
 * 几何全部来自 .editor-header（「新增知识库」抽屉那一套骨架）——AI 助手抽屉、
 * 这个变更预览抽屉、系统设置抽屉现在都挂同一个类，标题栏高度只有一处定义。
 * 原来这里抄的是 .ai-drawer-header 的 16px/20px，而那一份本身就和编辑器对不齐。
 */
.ai-kb-diff-header {
    gap: 12px;
}

/* 字号/字重/颜色/省略号由 .editor-title 提供，这里只排图标与文字 */
.ai-kb-diff-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-kb-diff-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-kb-diff-stat {
    display: flex;
    gap: 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ai-kb-diff-stat-add { color: var(--kb-diff-add-fg); }
.ai-kb-diff-stat-del { color: var(--kb-diff-del-fg); }

/* 尺寸、配色、hover 与图标字号全部由 .kb-header-icon-btn 提供（css/nav-controls.css）。
   原来这里那条 hover 是硬编码的 #f3f4f6，暗色主题下会闪一块白。 */
.ai-kb-diff-close {
    display: flex !important;
}

.ai-kb-diff-meta {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light, #f1f1f1);
    background: var(--bg-secondary, #f9fafb);
    font-size: 12px;
}

.ai-kb-diff-meta-row {
    display: flex;
    gap: 8px;
    margin: 2px 0;
}

.ai-kb-diff-meta-label {
    flex-shrink: 0;
    width: 40px;
    color: var(--text-secondary, #6b7280);
}

.ai-kb-diff-meta-value {
    min-width: 0;
    /* 走主题变量而不是硬编码深色：抽屉外壳的底色由 --bg-primary 决定，
       两者必须同源，否则暗色下深字压深底、读不出来 */
    color: var(--text-primary, #111827);
    word-break: break-word;
}

.ai-kb-diff-meta-row--changed .ai-kb-diff-meta-value del {
    color: var(--kb-diff-del-fg);
    text-decoration-color: var(--kb-diff-del-fg);
}

.ai-kb-diff-body {
    flex: 1;
    overflow: auto;
    padding: 8px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
}

/*
 * 窄屏：左右两格纵向堆叠，退化成传统的单栏 unified diff。
 *
 * 两类格子要收掉，否则每一行都读两遍：空占位格（分栏里它是对齐用的，单栏里只是空白），
 * 以及**没变的那些行的右格**——左右两格内容一模一样，都画出来等于整篇正文重复一遍。
 */
.ai-kb-diff-row {
    display: block;
}

.ai-kb-diff-cell {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    min-width: 0;
}

.ai-kb-diff-cell--empty,
.ai-kb-diff-row--same .ai-kb-diff-cell--right { display: none; }

.ai-kb-diff-cell--add { background: var(--kb-diff-add-bg); }
.ai-kb-diff-cell--del { background: var(--kb-diff-del-bg); }

.ai-kb-diff-gutter {
    flex-shrink: 0;
    width: 3em;
    text-align: right;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.ai-kb-diff-sign {
    flex-shrink: 0;
    width: 10px;
    color: #6b7280;
    user-select: none;
}

.ai-kb-diff-cell--add .ai-kb-diff-sign { color: var(--kb-diff-add-fg); }
.ai-kb-diff-cell--del .ai-kb-diff-sign { color: var(--kb-diff-del-fg); }

.ai-kb-diff-text {
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/*
 * 桌面端：左右分栏，与 IDE 的 git diff 同一种读法。断点取 1024px，
 * 与全站移动端断点 max-width:1023px 严丝合缝，不新增一套约定。
 */
@media (min-width: 1024px) {
    .ai-kb-diff-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* 分栏下两格都要在：右列是「新版正文」的完整一列，没变的行也得占着 */
    .ai-kb-diff-row--same .ai-kb-diff-cell--right { display: flex; }

    /* 空格子同理必须占位：收掉它右列就会整体往上错一行，从此对不齐 */
    .ai-kb-diff-cell--empty {
        display: flex;
        background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 6px,
            rgba(107, 114, 128, 0.07) 6px,
            rgba(107, 114, 128, 0.07) 12px
        );
    }

    .ai-kb-diff-cell--right {
        border-left: 1px solid var(--border-color, #e5e7eb);
    }
}

.ai-kb-diff-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary, #6b7280);
}

/* ============================== 深色主题 ============================== */

[data-theme="dark"] .ai-kb-draft-card {
    border-color: rgba(147, 197, 253, 0.3);
    background: rgba(59, 130, 246, 0.12);
    color: #e5e7eb;
}

[data-theme="dark"] .ai-kb-draft-card--applied {
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(34, 197, 94, 0.12);
}

[data-theme="dark"] .ai-kb-draft-card--dismissed {
    border-color: rgba(156, 163, 175, 0.28);
    background: rgba(107, 114, 128, 0.14);
}

[data-theme="dark"] .ai-kb-draft-icon { color: #93c5fd; }
[data-theme="dark"] .ai-kb-draft-card--applied .ai-kb-draft-icon { color: #4ade80; }
[data-theme="dark"] .ai-kb-draft-summary,
[data-theme="dark"] .ai-kb-draft-note { color: #d1d5db; }
[data-theme="dark"] .ai-kb-draft-action,
[data-theme="dark"] .ai-kb-draft-collapsed-hint,
[data-theme="dark"] .ai-kb-draft-summary-more { color: #9ca3af; }
[data-theme="dark"] .ai-kb-draft-hint { color: #fbbf24; }
[data-theme="dark"] .ai-kb-draft-btn--ghost { border-color: rgba(147, 197, 253, 0.4); color: #93c5fd; }
[data-theme="dark"] .ai-kb-draft-btn--text { color: #9ca3af; }
[data-theme="dark"] .ai-kb-draft-link { color: #93c5fd; }

/*
 * 抽屉外壳的底色与字色**不在这里写死**：`.ai-kb-diff-drawer` 用的是
 * --bg-primary / --text-primary / --border-light，而 reading-theme.css 那一层
 * 会按 [data-theme] 与纸感主题重定义它们——与 .ai-drawer 走的是同一套。
 * 早先这里硬编码 #1f2937，纸感主题下抽屉是冷灰而 AI 助手是纸黄，两个抽屉并排明显脱节。
 */
[data-theme="dark"] .ai-kb-diff-close { color: #9ca3af; }
[data-theme="dark"] .ai-kb-diff-close:hover { background: #374151; }
[data-theme="dark"] .ai-kb-diff-cell--right { border-left-color: #374151; }
[data-theme="dark"] .ai-kb-diff-gutter { color: #6b7280; }

/* ============================== 移动端 ============================== */

/* 全站移动端断点。抽屉只覆写宽度那一个变量——关闭态的 right 跟着它算 */
@media (max-width: 1023px) {
    .ai-kb-diff-drawer {
        --kb-diff-drawer-width: 100%;
        border-left: none;
    }
}

@media (max-width: 640px) {
    .ai-kb-draft-actions {
        flex-wrap: wrap;
    }

    .ai-kb-draft-spacer { display: none; }

    /* 手机上行号列挤掉的正文比它提供的信息多 */
    .ai-kb-diff-gutter { display: none; }
}