/*
 * AI 回答里的「本次生成的文件」。
 *
 * 与工具卡片（弱提示、无框）刻意相反：产物是这一轮的**结论物**，用户多半要点开它，
 * 所以给足边框、底色与命中区。配色全走 reading-theme.css 的 --kb-* 变量，
 * 暗色主题不需要再写一份覆盖。
 */

.ai-artifact-panel {
    margin-top: 10px;
}

.ai-artifact-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--kb-ink-muted);
}

.ai-artifact-head i {
    font-size: 14px;
}

/*
 * auto-fill + minmax：一张图时占满一行、四张图时自动排成两到三列，
 * 不用按数量写断点。最小 180px 是「缩略图还看得出内容」的下限。
 */
.ai-artifact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.ai-artifact-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--kb-paper-line);
    border-radius: 10px;
    background: var(--kb-paper-panel);
}

/* 音频没有画面，一行播放器就够了，不要为它撑出一格正方形 */
.ai-artifact-card--audio {
    grid-column: 1 / -1;
}

.ai-artifact-image {
    display: block;
    width: 100%;
    max-height: 200px;
    /* contain 而不是 cover：这是刚生成的图，裁掉一半等于让用户看不到自己要的那张 */
    object-fit: contain;
    background: var(--kb-paper-soft);
    cursor: zoom-in;
}

.ai-artifact-media {
    display: block;
    width: 100%;
}

.ai-artifact-card--video .ai-artifact-media {
    max-height: 240px;
    background: #000;
}

.ai-artifact-card--audio .ai-artifact-media {
    padding: 8px;
}

.ai-artifact-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    background: var(--kb-paper-soft);
    color: var(--kb-ink-muted);
    font-size: 28px;
}

/*
 * 文件已被删除或移动 / 预览加载失败：占位代替破图。高度与图片卡的预览区相当，
 * 一排卡片里删掉的那几张不会忽高忽低；配色只取 --kb-*，暗色主题不用另写
 */
.ai-artifact-blank--missing,
.ai-artifact-blank--note {
    flex-direction: column;
    gap: 6px;
    height: 120px;
    padding: 0 12px;
    text-align: center;
}

.ai-artifact-blank--missing i,
.ai-artifact-blank--note i {
    font-size: 26px;
}

.ai-artifact-blank--missing span,
.ai-artifact-blank--note span {
    font-size: 12px;
    line-height: 1.4;
}

.ai-artifact-card--missing {
    border-style: dashed;
    background: transparent;
}

.ai-artifact-card--missing .ai-artifact-blank {
    background: transparent;
}

.ai-artifact-card--missing .ai-artifact-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--kb-ink-muted);
    text-decoration: line-through;
    text-decoration-color: var(--kb-paper-line);
}

.ai-artifact-card--missing .ai-artifact-name i {
    flex-shrink: 0;
    font-size: 13px;
}

.ai-artifact-card--missing .ai-artifact-action {
    color: var(--kb-ink-soft);
}

.ai-artifact-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 0;
    min-width: 0;
}

.ai-artifact-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--kb-ink);
}

.ai-artifact-size {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--kb-ink-muted);
}

.ai-artifact-actions {
    display: flex;
    /* 卡片最窄只有 180px，而「在文件夹中显示」本身就要 110px 上下：不换行的话两个键
       会溢出，又正好被 .ai-artifact-card 的 overflow:hidden 齐边裁掉——
       表现是右边那个键少半截，而不是滚动条 */
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px 8px;
}

.ai-artifact-action {
    display: inline-flex;
    align-items: center;
    /* 宁可换行也不许把「在文件夹中显示」压成两行字 */
    flex-shrink: 0;
    white-space: nowrap;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--kb-accent-strong);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ai-artifact-action:hover {
    background: var(--kb-active-bg);
}

.ai-artifact-hint,
.ai-artifact-more {
    font-size: 11px;
    color: var(--kb-ink-muted);
}

.ai-artifact-more {
    margin-top: 8px;
}

/*
 * 「工作/编码」会话的产物清单：改的是项目源码，一行一个文件——名字 + 相对项目根的路径 +
 * 打开 / 定位。预览卡片（.ai-artifact-grid）留给「聊天」里的图片 / 音视频 / PPT。
 */
.ai-artifact-head em {
    font-style: normal;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--kb-active-bg);
    color: var(--kb-ink-soft);
    font-size: 11px;
    line-height: 1.6;
}

.ai-artifact-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--kb-paper-line);
    border-radius: 8px;
    overflow: hidden;
}

.ai-artifact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 10px;
    font-size: 12.5px;
    line-height: 1.5;
}

.ai-artifact-row + .ai-artifact-row {
    border-top: 1px solid var(--kb-paper-line);
}

.ai-artifact-row:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg);
}

.ai-artifact-row-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 1.5em;
    line-height: 1;
    position: relative;
    top: var(--kb-icon-optical-shift, 0.06em);
    color: var(--kb-ink-muted);
    font-size: 14px;
}

.ai-artifact-row-name {
    flex-shrink: 0;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--kb-ink);
}

.ai-artifact-row-path {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 省略号打在开头、留住最后几级目录名：路径的区分度全在末尾 */
    direction: rtl;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--kb-ink-muted);
}

.ai-artifact-row .ai-artifact-size {
    flex-shrink: 0;
}

.ai-artifact-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--kb-accent-strong);
    font-size: 14px;
    cursor: pointer;
    opacity: 0.7;
}

.ai-artifact-row-action:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    opacity: 1;
    background: var(--kb-active-bg-strong);
}

/* 清单行：文件已被删除或移动——文件名划掉，定位键换成一个「已删除」标记（diff 仍可点开） */
.ai-artifact-row--missing .ai-artifact-row-name {
    color: var(--kb-ink-muted);
    text-decoration: line-through;
}

.ai-artifact-row-missing {
    flex-shrink: 0;
    padding: 0 6px;
    border: 1px dashed var(--kb-paper-line);
    border-radius: 999px;
    color: var(--kb-ink-muted);
    font-size: 11px;
    line-height: 1.6;
}

/* ============================== 改动汇总（工作/编码会话） ============================== */

/*
 * 头部「已编辑 N 个文件 +A −D ……… 撤销」：统计紧跟标题，撤销键靠右。
 * 红绿只从 reading-theme.css 的 --kb-diff-* 取，与 AI 写知识库的差异预览同一份。
 */
.ai-artifact-head--changes {
    gap: 8px;
}

.ai-artifact-head--changes .ai-artifact-title {
    color: var(--kb-ink);
    font-weight: 600;
}

.ai-artifact-head-spacer {
    flex: 1;
}

.ai-artifact-stats,
.ai-artifact-row-stats {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
}

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

.ai-artifact-undo,
.ai-artifact-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 2px 8px;
    border: 1px solid var(--kb-paper-line);
    border-radius: 6px;
    background: var(--kb-paper-panel);
    color: var(--kb-ink-soft);
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
}

.ai-artifact-undo:hover:not(:disabled):not(:where(html[data-kb-pointer="touch"] *)),
.ai-artifact-more-btn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: var(--kb-active-bg);
    color: var(--kb-ink);
}

/* 禁用态走全站语义变量，不许用 opacity（docs/theme-control-states.md） */
.ai-artifact-undo:disabled {
    background: var(--kb-control-disabled-bg);
    border-color: var(--kb-control-disabled-border);
    color: var(--kb-control-disabled-text);
    cursor: default;
}

/* 默认只露前几行；「再显示 N 个文件」把面板打上 --expanded 后其余行才出现 */
.ai-artifact-item--overflow { display: none; }
.ai-artifact-panel--expanded .ai-artifact-item--overflow { display: block; }
.ai-artifact-panel--expanded .ai-artifact-more-btn { display: none; }

.ai-artifact-item + .ai-artifact-item {
    border-top: 1px solid var(--kb-paper-line);
}

/* 行本身在 .ai-artifact-item 里，分隔线改挂到 item 上 */
.ai-artifact-item .ai-artifact-row + .ai-artifact-row { border-top: none; }

.ai-artifact-more-btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    border-style: dashed;
    background: transparent;
}

.ai-artifact-row--diffable {
    cursor: pointer;
}

.ai-artifact-row-chevron {
    flex-shrink: 0;
    color: var(--kb-ink-muted);
    font-size: 14px;
    transition: transform 0.15s ease;
}

.ai-artifact-row.is-open .ai-artifact-row-chevron {
    transform: rotate(90deg);
}

/* 改动汇总里路径在前、文件名在后（参考 Claude Code：目录暗、文件名亮），路径不再吃掉整行 */
.ai-artifact-head--changes ~ .ai-artifact-list .ai-artifact-row-path {
    flex: 0 1 auto;
    max-width: 55%;
    direction: ltr;
}

.ai-artifact-head--changes ~ .ai-artifact-list .ai-artifact-row-name {
    flex: 1 1 auto;
    max-width: none;
}

/* 行下方的左右两列 diff：等宽、行号 gutter、红绿底色走变量，暗色不用再写一份 */
.ai-artifact-diff {
    border-top: 1px solid var(--kb-paper-line);
    background: var(--kb-paper-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.55;
    max-height: 360px;
    overflow: auto;
}

.ai-artifact-diff-note {
    padding: 6px 10px;
    color: var(--kb-ink-muted);
    font-family: inherit;
    font-size: 12px;
}

/*
 * 一个 grid 画两列：每行四格 = 左行号 / 左文本 / 右行号 / 右文本。左右同在一个 grid 行里，
 * 长行 pre-wrap 折行之后两侧仍然等高对齐——分成两个容器各自滚动就对不齐了。
 * .ai-diff-row 用 display: contents，只为让每行的四格作为一组写进 HTML。
 */
.ai-diff-split {
    display: grid;
    grid-template-columns: 3.4em minmax(0, 1fr) 3.4em minmax(0, 1fr);
}

.ai-diff-row {
    display: contents;
}

.ai-diff-cell {
    min-width: 0;
    padding: 0 8px 0 0;
    color: var(--kb-ink);
}

.ai-diff-cell--text {
    white-space: pre-wrap;
    word-break: break-all;
}

/* 右半边与左半边之间画一条分隔线 */
.ai-diff-gutter.ai-diff-cell--right {
    border-left: 1px solid var(--kb-paper-line);
}

.ai-diff-cell--add { background: var(--kb-diff-add-bg); }
.ai-diff-cell--del { background: var(--kb-diff-del-bg); }
.ai-diff-cell--empty { background: var(--kb-active-bg); }
.ai-diff-gutter.ai-diff-cell--add { color: var(--kb-diff-add-fg); }
.ai-diff-gutter.ai-diff-cell--del { color: var(--kb-diff-del-fg); }

.ai-diff-row--hunk .ai-diff-cell--hunk {
    grid-column: 1 / -1;
    padding: 1px 8px;
    color: var(--kb-ink-muted);
    background: var(--kb-active-bg);
}

.ai-diff-gutter {
    padding-right: 6px;
    text-align: right;
    color: var(--kb-ink-muted);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* 窄屏放不下两列：右半边换到下一行，仍在同一个 grid 里，一行改动就是上下两行 */
@media (max-width: 560px) {
    .ai-diff-split {
        grid-template-columns: 3.4em minmax(0, 1fr);
    }

    .ai-diff-gutter.ai-diff-cell--right {
        border-left: none;
    }
}