/* 标签栏容器 */
.tag-bar-container {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--tag-divider);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tag-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--site-subtitle);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 标签样式 */
.tag {
  display: inline-flex;
  align-items: center;
  color: var(--tag-text, #cfe4ff);
  user-select: none;
}

.tag:hover {
  z-index: 1;
}

.tag.active {
  color: #fff;
}

/* 分组颜色定义
 * --tag-base-color: 主色调
 * --tag-bg: 选中时的背景
 * --tag-border: 选中时的边框 & 悬停时的边框
 * --tag-bg-dim: 未选中时的背景 (低透明度主色)
 * --tag-border-dim: 未选中时的边框 (稍高透明度主色)
 * --tag-text: 未选中时的文字颜色 (通常是主色调或稍微变亮)
 * --tag-bg-hover: 悬停时的背景
 */

/* 1. 平台/领域 */
.tag-group-1 { 
  --tag-base-color: #60a5fa;
  --tag-bg: rgba(37, 99, 235, 0.72);
  --tag-border: #60a5fa;
  --tag-bg-dim: rgba(37, 99, 235, 0.16);
  --tag-border-dim: rgba(96, 165, 250, 0.3);
  --tag-text: #bfdbfe;
  --tag-bg-hover: rgba(37, 99, 235, 0.26);
}

/* 2. 工具类型 */
.tag-group-2 { 
  --tag-base-color: #34d399;
  --tag-bg: rgba(5, 150, 105, 0.72);
  --tag-border: #34d399;
  --tag-bg-dim: rgba(5, 150, 105, 0.16);
  --tag-border-dim: rgba(52, 211, 153, 0.3);
  --tag-text: #bbf7d0;
  --tag-bg-hover: rgba(5, 150, 105, 0.26);
}

/* 3. 使用阶段 */
.tag-group-3 { 
  --tag-base-color: #fbbf24;
  --tag-bg: rgba(217, 119, 6, 0.78);
  --tag-border: #fbbf24;
  --tag-bg-dim: rgba(217, 119, 6, 0.16);
  --tag-border-dim: rgba(251, 191, 36, 0.3);
  --tag-text: #fde68a;
  --tag-bg-hover: rgba(217, 119, 6, 0.26);
}

/* 4. 交互形态 */
.tag-group-4 { 
  --tag-base-color: #fb7185;
  --tag-bg: rgba(225, 29, 72, 0.72);
  --tag-border: #fb7185;
  --tag-bg-dim: rgba(225, 29, 72, 0.16);
  --tag-border-dim: rgba(251, 113, 133, 0.3);
  --tag-text: #fecdd3;
  --tag-bg-hover: rgba(225, 29, 72, 0.26);
}

/* 其他/未知 - 灰色 */
.tag-group-0 { 
  --tag-bg: rgba(71, 85, 105, 0.72);
  --tag-border: #94a3b8;
  --tag-bg-dim: rgba(148, 163, 184, 0.08);
  --tag-border-dim: rgba(148, 163, 184, 0.16);
  --tag-text: #cbd5e1;
  --tag-bg-hover: rgba(148, 163, 184, 0.16);
}

/* --- Light Theme Overrides --- */
[data-theme="light"] .tag-group-1 { 
  --tag-base-color: #2563eb;
  --tag-bg: #2563eb; 
  --tag-border: #2563eb;
  --tag-bg-dim: rgba(37, 99, 235, 0.08);
  --tag-border-dim: rgba(37, 99, 235, 0.2);
  --tag-text: #1d4ed8;
  --tag-bg-hover: rgba(37, 99, 235, 0.15);
}

[data-theme="light"] .tag-group-2 { 
  --tag-base-color: #059669;
  --tag-bg: #059669; 
  --tag-border: #059669;
  --tag-bg-dim: rgba(5, 150, 105, 0.08);
  --tag-border-dim: rgba(5, 150, 105, 0.2);
  --tag-text: #047857;
  --tag-bg-hover: rgba(5, 150, 105, 0.15);
}

[data-theme="light"] .tag-group-3 { 
  --tag-base-color: #d97706;
  --tag-bg: #d97706; 
  --tag-border: #d97706;
  --tag-bg-dim: rgba(217, 119, 6, 0.08);
  --tag-border-dim: rgba(217, 119, 6, 0.2);
  --tag-text: #b45309;
  --tag-bg-hover: rgba(217, 119, 6, 0.15);
}

[data-theme="light"] .tag-group-4 { 
  --tag-base-color: #e11d48;
  --tag-bg: #e11d48;
  --tag-border: #e11d48;
  --tag-bg-dim: rgba(225, 29, 72, 0.08);
  --tag-border-dim: rgba(225, 29, 72, 0.2);
  --tag-text: #be123c;
  --tag-bg-hover: rgba(225, 29, 72, 0.15);
}

[data-theme="light"] .tag-group-0 { 
  --tag-bg: #64748b; 
  --tag-border: #64748b; 
  --tag-bg-dim: rgba(100, 116, 139, 0.08);
  --tag-border-dim: rgba(100, 116, 139, 0.2);
  --tag-text: #475569;
  --tag-bg-hover: rgba(100, 116, 139, 0.15);
}

[data-theme="light"] .tag-controls {
  color: var(--site-subtitle);
}

[data-theme="light"] .tag-bar-container {
  border-top: 1px solid var(--tag-divider);
}

/* 选中清除按钮 */
.tag-clear-btn {
  margin-left: auto;
  border-radius: 4px;
  background: var(--tag-clear-bg);
  color: var(--tag-clear-text);
  cursor: pointer;
  border: 0px solid transparent;
  font-size: 12px;
  display: none; /* 默认隐藏，有选中时显示 */
}
.tag-clear-btn:hover {
  background: var(--tag-clear-bg-hover);
}

/* 展开/收起按钮 */
.tag-expand-btn {
  color: var(--site-subtitle);
  cursor: pointer;
  margin-left: 8px;
  font-size: 12px;
  text-decoration: underline;
  opacity: 0.8;
}
.tag-expand-btn:hover { opacity: 1; }

/* 卡片底部的标签 */
.card-tags {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--tag-card-border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.card-tags .tag {
  --tag-chip-font-size: 10px;
  --tag-chip-padding: 1px 6px;
  --tag-chip-cursor: default;
  --tag-card-opacity: 0.82;
}
.card-tags .tag:hover {
  transform: none;
}

.meta-tags {
  margin: 4px 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-tags .tag {
  --tag-chip-font-size: 11px;
  --tag-chip-padding: 3px 8px;
  --tag-chip-cursor: default;
}