/*
 * 知识库 / 模板列表的批量操作（js/knowledge-batch.js）。
 *
 * 进入批量模式（body.kb-batch-mode）后，工具栏那一行——桌面端的 .list-controls、移动端的
 * .mobile-search-controls——换成 .kb-batch-bar，高度不变，列表不跳。入口按钮沿用 .sort-toggle-btn。
 */

.kb-batch-bar {
    display: none;
    align-items: center;
    gap: 6px;
    /* 与 .sort-toggle-btn 同高：换成操作栏时这一行不变高 */
    min-height: 40px;
    min-width: 0;
    /* 按钮上的文字放不放得下，看的是这一栏自己的宽度而不是视口：桌面端列表栏只有约 400px */
    container: kb-batch-bar / inline-size;
}

body.kb-batch-mode .kb-batch-bar {
    display: flex;
}

body.kb-batch-mode .list-header .list-controls,
body.kb-batch-mode .mobile-search-bar .mobile-search-controls {
    display: none;
}

.kb-batch-count {
    flex-shrink: 0;
    padding: 0 4px;
    font-size: 0.875rem;
    color: var(--kb-ink-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kb-batch-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-left: auto;
    /* 窄屏放不下五个动作时横向滚，不折行、不挤掉计数 */
    overflow-x: auto;
    scrollbar-width: none;
}

.kb-batch-actions::-webkit-scrollbar {
    display: none;
}

.kb-batch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    /* 默认只有图标（带 title 与 aria-label）；栏够宽时才把文字放出来，见文件末尾的容器查询 */
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--kb-paper-line);
    border-radius: 8px;
    background: var(--kb-control-bg);
    color: var(--kb-ink);
    font-size: 0.8125rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kb-batch-btn i {
    font-size: 1rem;
    line-height: 1;
}

.kb-batch-btn-label {
    display: none;
}

/* 退出、全选：不是「对选中项做什么」，不画成按钮的样子 */
.kb-batch-btn--plain {
    border-color: transparent;
    background: transparent;
    color: var(--kb-ink-soft);
}

/* 与卡片上单条删除键同一个破坏性色（reading-theme.css 的 .action-btn.delete-btn） */
.kb-batch-btn--danger {
    color: #c1665a;
}

@media (any-hover: hover) {
    .kb-batch-btn:where(:not(:disabled)):hover:not(:where(html[data-kb-pointer="touch"] *)) {
        border-color: color-mix(in srgb, var(--kb-accent) 30%, var(--kb-paper-line));
        background: var(--kb-paper-soft);
    }

    .kb-batch-btn--plain:where(:not(:disabled)):hover:not(:where(html[data-kb-pointer="touch"] *)) {
        border-color: transparent;
        color: var(--kb-ink);
    }
}

.kb-batch-btn:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: 1px;
}

/* 没选条目 / 请求中：统一的禁用态变量，不用透明度表达 */
.kb-batch-btn:disabled {
    cursor: not-allowed;
    border-color: var(--kb-control-disabled-border);
    background: var(--kb-control-disabled-bg);
    color: var(--kb-control-disabled-text);
}

.kb-batch-btn--plain:disabled {
    border-color: transparent;
    background: transparent;
    color: var(--kb-control-disabled-text);
}

/* ---------------- 卡片上的勾选框 ---------------- */

body.kb-batch-mode .knowledge-card {
    cursor: pointer;
}

/* 给勾选框让出位置；卡片上的单条操作键在批量模式下收起（整张卡片都是勾选的命中区） */
body.kb-batch-mode .knowledge-card-header {
    padding-left: 26px;
}

/* !important：悬停时把它显示出来的那条规则更具体 */
body.kb-batch-mode .knowledge-card-actions {
    display: none !important;
}

.knowledge-card-check {
    position: absolute;
    /* 对齐标题首行的行盒中线：标题折成两三行时勾选框仍贴着第一行 */
    top: calc((var(--kb-card-title-font-size) * var(--kb-card-title-line-height) - 16px) / 2);
    left: 0;
    /* 点击由卡片统一接 */
    pointer-events: none;
}

/* 描边要压过 reading-theme.css 里卡片那几条带 !important 的规则，所以这里也带，并靠多一层 body 类抬特异度 */
body.kb-batch-mode .knowledge-card.is-batch-selected {
    background: color-mix(in srgb, var(--kb-paper-panel) 82%, var(--kb-accent-soft)) !important;
    border-color: color-mix(in srgb, var(--kb-accent) 48%, var(--kb-paper-line)) !important;
    box-shadow: 0 0 0 3px var(--kb-accent-soft) !important;
}

/* ---------------- 移动标签弹框 ---------------- */

.kb-batch-tags {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kb-batch-tags-summary {
    font-size: 0.875rem;
    color: var(--kb-ink-soft);
}

.kb-batch-tags-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.kb-batch-tags-mode-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    font-size: 0.875rem;
    color: var(--kb-ink);
    cursor: pointer;
}

.kb-batch-tags-list {
    max-height: min(45vh, 320px);
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--kb-paper-line);
    border-radius: 10px;
}

.kb-batch-tag-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    /* 子标签按层级缩进，与侧栏标签树同一个观感 */
    padding: 0 8px 0 calc(8px + var(--kb-batch-tag-depth, 0) * 18px);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--kb-ink);
    cursor: pointer;
}

@media (any-hover: hover) {
    .kb-batch-tag-item:hover:not(:where(html[data-kb-pointer="touch"] *)) {
        background: var(--kb-paper-soft);
    }
}

.kb-batch-tag-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kb-ink-muted);
}

.kb-batch-tag-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-batch-tags-empty {
    padding: 20px 12px;
    font-size: 0.875rem;
    color: var(--kb-ink-muted);
    text-align: center;
}

/* 栏够宽（大屏、列表栏被拉宽）时动作键带上文字 */
@container kb-batch-bar (min-width: 620px) {
    .kb-batch-btn:has(.kb-batch-btn-label) {
        width: auto;
        padding: 0 12px;
    }

    .kb-batch-btn-label {
        display: inline;
    }
}

@media (max-width: 1023px) {
    /* 375px 宽要排下「退出 + 计数 + 全选 + 五个动作」：按钮收窄到 36px、间距收到 2px，高度放到 40px 补命中区 */
    .kb-batch-btn {
        width: 36px;
        height: 40px;
    }

    .kb-batch-bar,
    .kb-batch-actions {
        gap: 2px;
    }

    .kb-batch-count {
        padding: 0 2px;
    }

    /* 触屏上每一行都要够手指点 */
    .kb-batch-tag-item,
    .kb-batch-tags-mode-item {
        min-height: 44px;
    }
}