/* ================================================================
   知识库视图 —— 固定视口高三区骨架：页头 / 标签折叠云 / 双栏主体
   主体左栏卡片网格 + 右栏阅读/编辑，两栏各自独立滚动（整页不滚）。
   视图切换与骨架对齐 memory.css：kb-view-open class 驱动。
   ================================================================ */

/* === 视图切换：知识库界面打开时隐藏聊天区 === */
#main-area.kb-view-open #message-area,
#main-area.kb-view-open #input-area {
  display: none;
}

/* === 知识库视图骨架：钉在视口内，整页不滚动 === */
#kb-view {
  flex: 1;
  height: calc(100vh - 52px);
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-xl);
}

#kb-view-inner {
  width: 100%;
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: 0;
}

/* === 页头：搜索框 + 操作组一行 === */
.kb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-shrink: 0;
}

#kb-search-input {
  flex: 1;
  min-width: 160px;
  padding: 6px var(--space-md);
  font-size: var(--fs-l4);
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-secondary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast);
}

#kb-search-input:focus {
  border-color: var(--accent);
}

.kb-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* === 标签区：多行折叠 chip 云（默认一行，溢出时右侧给展开钮） === */
#kb-toolbar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  flex-shrink: 0;
}

#kb-tag-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

#kb-tag-bar.collapsed {
  max-height: 30px;   /* 恰好一行 chip */
  overflow: hidden;
}

#kb-tag-expand {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: var(--fs-l5);
}

.kb-tag-chip {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: var(--fs-l5);
  font-family: var(--font-sans);
  color: var(--text-secondary);
  background: var(--surface-secondary);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.kb-tag-chip:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.kb-tag-chip.active {
  background: var(--accent-subtle);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* === 主体：左卡片网格 + 右阅读/编辑，两栏独立滚动 === */
#kb-body {
  display: flex;
  gap: var(--space-lg);
  flex: 1;
  min-height: 0;
}

#kb-list-col {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* 卡片网格：auto-fill 多列，时间分组标题占满整行 */
#kb-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
  align-content: start;
  padding-bottom: var(--space-md);
}

/* === 时间分组标题 === */
.kb-group-title {
  grid-column: 1 / -1;
  padding: var(--space-xs) var(--space-md) 2px;
  font-size: var(--fs-l5);
  color: var(--text-tertiary);
  user-select: none;
}

.kb-group-title:first-child {
  padding-top: 0;
}

/* === 列表卡片 === */
.kb-item {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.kb-item:hover {
  background: var(--surface-hover);
}

.kb-item.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.kb-item-title {
  font-size: var(--fs-l4);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: var(--space-lg);
}

.kb-item-summary {
  margin-top: 2px;
  font-size: var(--fs-l5);
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-xs);
}

.kb-item-tag {
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 16px;
}

.kb-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  font-size: var(--fs-l5);
  color: var(--text-secondary);
}

.kb-item-badge {
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 10px;
}

.kb-item-badge-auto {
  background: var(--success-bg);
  color: var(--success);
}

.kb-item-delete {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.kb-item:hover .kb-item-delete {
  display: flex;
}

.kb-item-delete:hover {
  background: var(--surface-primary);
  color: var(--text-primary);
}

.kb-no-match {
  grid-column: 1 / -1;
  padding: var(--space-lg);
  font-size: var(--fs-l4);
  color: var(--text-secondary);
  text-align: center;
}

/* === 空态与占位 === */
#kb-empty-state,
#kb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  color: var(--text-secondary);
  font-size: var(--fs-l4);
  text-align: center;
}

#kb-placeholder {
  flex: 1;
  min-height: 0;
}

/* 空列表：空态独占整行，隐藏编辑器占位 */
#kb-body.empty #kb-list-col {
  flex: 1;
}

#kb-body.empty #kb-placeholder,
#kb-body.empty #kb-editor,
#kb-body.empty #kb-reader {
  display: none !important;
}

.kb-empty-hint {
  font-size: var(--fs-l5);
  opacity: 0.8;
}

/* === 编辑器（右栏全高，双栏内部各自滚动） === */
#kb-editor {
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-md);
}

#kb-title-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-l2);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-secondary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  outline: none;
}

#kb-title-input:focus {
  border-color: var(--accent);
}

/* 标签编辑器：chips + 尾部「+ 标签」按钮 */
#kb-tag-editor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--surface-secondary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}

#kb-tag-editor:focus-within {
  border-color: var(--accent);
}

#kb-tag-chips {
  display: contents;   /* chips 直接参与 #kb-tag-editor 的 flex 布局 */
}

.kb-edit-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px 1px 8px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: var(--fs-l5);
}

.kb-tag-remove {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.kb-tag-remove:hover {
  background: var(--accent-border);
}

#kb-tag-input {
  flex: 1;
  min-width: 120px;
  padding: 4px 0;
  font-size: var(--fs-l4);
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
}

#kb-panes {
  display: flex;
  gap: var(--space-md);
  flex: 1;
  min-height: 0;
}

#kb-content-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-md);
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-l4);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-secondary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  outline: none;
  resize: none;
}

#kb-content-input:focus {
  border-color: var(--accent);
}

#kb-preview {
  flex: 1;
  min-width: 0;
  padding: var(--space-md);
  background: var(--surface-secondary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow-y: auto;
}

.kb-preview-empty {
  color: var(--text-secondary);
  font-size: var(--fs-l4);
}

/* === 阅读视图（默认态）：整体作为一个阅读流独立滚动 === */
#kb-reader {
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: auto;
}

.kb-reader-bar {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

#btn-kb-edit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

#kb-reader-title {
  margin: 0;
  font-size: var(--fs-l1);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

#kb-reader-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.kb-reader-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: var(--fs-l5);
}

#kb-reader-content {
  flex-shrink: 0;
  padding: var(--space-lg);
  background: var(--surface-secondary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}

#kb-reader-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
  font-size: var(--fs-l5);
  color: var(--text-tertiary);
  padding-bottom: var(--space-md);
}

/* 来源 chip：可点回跳原对话；对话已删时置灰 */
.kb-source-chip {
  padding: 2px 10px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: var(--fs-l5);
  font-family: var(--font-sans);
  cursor: pointer;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.kb-source-chip:hover {
  background: var(--accent-border);
}

.kb-source-chip.disabled {
  border-color: var(--rule);
  background: var(--surface-secondary);
  color: var(--text-tertiary);
  cursor: default;
}

.kb-source-chip.disabled:hover {
  background: var(--surface-secondary);
}

/* === 编辑态顶栏 === */
.kb-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-shrink: 0;
}

.kb-editor-hint {
  font-size: var(--fs-l5);
  color: var(--text-tertiary);
}

/* 「+ 标签」按钮（点开小输入框，替代常驻输入框） */
#kb-tag-add {
  flex-shrink: 0;
  padding: 1px 10px;
  border: 1px dashed var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-l5);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

#kb-tag-add:hover {
  color: var(--accent);
  border-color: var(--accent-border);
}

/* === 整理建议清单弹层 === */
#kb-consolidate-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-l2);
  font-weight: 600;
  color: var(--text-primary);
}

.kb-consolidate-desc {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-l4);
  color: var(--text-secondary);
}

#kb-consolidate-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: var(--space-md);
}

.kb-plan-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  cursor: pointer;
}

.kb-plan-row:hover {
  background: var(--surface-hover);
}

.kb-plan-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.kb-plan-text {
  font-size: var(--fs-l4);
  color: var(--text-primary);
  line-height: 1.5;
  word-break: break-word;
}

/* 自动收录提醒已改为侧栏「知识库」按钮 +N 徽标（样式在 memory.css
   .sidebar-nav-badge，逻辑 sidebarNavBadgeBump 在 sidebar.js）。 */

/* === 窄屏：上下堆叠，列表限高独立滚动 === */
@media (max-width: 768px) {
  #kb-view {
    padding: var(--space-md);
  }

  .kb-header {
    flex-wrap: wrap;
  }

  #kb-search-input {
    flex: 1 1 100%;
    order: -1;
  }

  .kb-header-actions {
    flex-wrap: wrap;
  }

  #kb-body {
    flex-direction: column;
  }

  #kb-list-col {
    flex: none;
    max-height: 40vh;
  }

  #kb-list {
    grid-template-columns: 1fr;
  }

  #kb-reader,
  #kb-editor,
  #kb-placeholder {
    flex: 1;
    min-height: 0;
  }

  #kb-panes {
    flex-direction: column;
  }

  #kb-content-input {
    min-height: 200px;
  }
}