/* skills.css — 严格对齐 prototype-01-catalog.html,用 CodeDeck CSS 变量 */

/* ── Skills 区 ── */
.skills-section {
  width: 100%;
  max-width: 1280px;
  margin: 36px auto 0;
  padding: 0 8px;
}

.skills-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.skills-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* ── kind 顶层 tab(模板广场/专家广场)—— 独立 class,不复用 .sk-tab,
   否则两条 tab 行共享 class 会互相冲每次点击的 active 态 ── */
.sk-kind-tabs-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.sk-kind-tab {
  padding: 6px 2px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.sk-kind-tab:hover { color: var(--text); }
.sk-kind-tab.active {
  background: none;
  border-bottom-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
.skills-header-spacer { flex: 1; }

/* ── 搜索框 + tabs 同一行 ── */
.sk-tabs-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  padding: 0 4px;
}

.sk-search-wrap {
  flex: 0 0 220px;
  align-self: center;
  margin-bottom: 8px;
  position: relative;
  display: flex;
  align-items: center;
}
.sk-search-icon {
  position: absolute;
  left: 8px;
  display: flex;
  align-items: center;
  color: var(--text3);
  pointer-events: none;
}
.sk-search-icon svg { width: 14px; height: 14px; }
.sk-search {
  width: 100%;
  padding: 6px 26px 6px 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.sk-search:focus { border-color: var(--accent); }
.sk-search-clear {
  position: absolute;
  right: 6px;
  display: none;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  padding: 2px;
}
.sk-search-clear svg { width: 12px; height: 12px; }
.sk-search-wrap.has-text .sk-search-clear { display: flex; }

/* ── Tabs 横滚 ── */
.skills-tabs-wrap {
  flex: 1;
  min-width: 0;
  border-bottom: none;
  margin-bottom: 0;
  overflow: hidden;
}
.skills-tabs {
  display: flex;
  gap: 2px;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px;
}
.skills-tabs::-webkit-scrollbar { display: none; }

.sk-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
  margin-bottom: -1px;
}
.sk-tab:hover { color: var(--text); }
.sk-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
/* My Skills tab: 右侧分隔线 + 星标 icon */
.my-skills-tab {
  border-right: 1px solid var(--border);
  padding-right: 20px;
}
.sk-tab-star { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--accent2, var(--accent)); }
.my-skills-tab.active .sk-tab-star { color: var(--accent); }

/* ── 卡片网格 (固定高度,不随数据量变化,避免切 tab 时布局跳动) ── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding-bottom: 16px;
  height: 520px;           /* 固定高度,约两行卡片 (244*2 + 间距),超出滚动 */
  min-height: 520px;       /* 空状态也占同样高度,切 tab 不跳动 */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  /* 卡片按自然高度排列并从顶部堆叠; 溢出走滚动。
     否则固定高度 + auto 行会把多行卡片压扁, 缩略图溢出被裁成碎块 */
  align-content: start;
  grid-auto-rows: max-content;
}
.skills-grid::-webkit-scrollbar { width: 4px; }
.skills-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.sk-loading, .sk-error, .sk-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: var(--text3);
  font-size: 13px;
}

/* ── Skill 卡片 ── */
.sk-card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation: fadeUp 0.25s ease-out;
  display: flex;
  flex-direction: column;
}
.sk-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sk-thumb {
  width: 100%;
  height: 138px;
  flex-shrink: 0;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.sk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--text3);
  background: linear-gradient(135deg, var(--bg4), var(--bg3));
  opacity: 0.6;
}

.sk-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.sk-card:hover .sk-del { opacity: 1; }
.sk-del:hover { background: var(--red); }

.sk-meta { padding: 10px 12px; flex: 1; }
.sk-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-desc {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.4;
  height: 34px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sk-foot {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.sk-cat, .sk-source-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg4);
  color: var(--text3);
}

.sk-use {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 2;
}
.sk-card:hover .sk-use { opacity: 1; transform: translateY(0); }
.sk-use:hover { opacity: 0.9; }

/* ── 专家卡片(kind=expert):无缩略图,纯文字三行(display_name/分类/description),
   评审 5.2 点出的两个坑——.sk-desc 34px/2行 clamp 太紧、.sk-use 绝对定位悬浮
   按钮会盖住短卡内容——都在这里单独覆盖,不影响模板卡 ── */
.sk-card.kind-expert {
  min-height: 128px;
}
.sk-card.kind-expert .sk-meta-expert {
  padding: 14px 14px 44px;   /* 底部留白让悬浮 use 按钮不压文字 */
}
.sk-card.kind-expert .sk-foot-expert {
  margin: 0 0 6px;   /* 复用模板卡 footBadges(My Skills/分类角标),位置挪到标题下方 */
}
.sk-card.kind-expert .sk-desc-expert {
  height: auto;
  max-height: 50px;         /* 放宽到约 3 行(比模板卡 2 行更能承载纯文字介绍,
                                给标签行让出空间) */
  -webkit-line-clamp: 3;
}
.sk-card.kind-expert .sk-expert-tags {
  margin-top: 6px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sk-card.kind-expert .sk-del {
  top: 8px;
}

/* ── 通用技能卡(kind=generic,19 号 C1):复用专家卡排版(无缩略图纯文字),
   标题行带 kind 类型标签区分 ── */
.sk-card.kind-generic {
  min-height: 128px;
}
.sk-card.kind-generic .sk-meta-expert {
  padding: 14px 14px 44px;
}
.sk-card.kind-generic .sk-foot-expert {
  margin: 0 0 6px;
}
.sk-card.kind-generic .sk-desc-expert {
  height: auto;
  max-height: 50px;
  -webkit-line-clamp: 3;
}
.sk-card.kind-generic .sk-expert-tags {
  margin-top: 6px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sk-card.kind-generic .sk-del {
  top: 8px;
}
.sk-kind-label {
  font-weight: 400;
  opacity: 0.75;
  margin-left: 2px;
}

/* ── 标签 chip(卡片 + 详情弹窗共用)—— 后端 tags 字段之前一直没渲染 ── */
.sk-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg4);
  color: var(--text3);
}
.sd-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── 虚线占位"新建 Skill"卡 ── */
.sk-card-add {
  position: relative;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100%;
  padding: 24px 14px;
  color: var(--text2);
  transition: all 0.2s;
  animation: fadeUp 0.25s ease-out;
  font-family: inherit;
}
.sk-card-add:hover {
  border-color: var(--accent);
  background: var(--accent-glow, rgba(107,122,141,0.08));
  color: var(--text);
  transform: translateY(-3px);
}
.sk-add-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--text2);
}
.sk-add-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.sk-add-hint { font-size: 11px; color: var(--text3); line-height: 1.4; }

/* ── 对话页 chip (紧凑横向滚动) ── */
.skill-chip-bar {
  display: flex;
  gap: 6px;
  padding: 8px 14px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.skill-chip-bar:empty { display: none; }
.skill-chip-bar::-webkit-scrollbar { display: none; }

.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 3px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 11px;
  color: var(--text);
  flex-shrink: 0;
  animation: scFadeUp 0.2s ease-out;
}
@keyframes scFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.skill-chip.is-public { background: var(--bg3); }
/* System 注入 chip（docs/feat/system-skill-picker.md）：虚线描边与普通 chip（实线）
   区分注入身份；不进消息 attachments 回显（既有设计），仅发送前的前端状态 */
.skill-chip.is-system {
  border: 1px dashed var(--accent); background: var(--accent-glow);
}
.skill-chip.is-system .sc-name { color: var(--accent); font-weight: 600; }
.skill-chip .sc-thumb {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--bg4) 0%, var(--accent-glow) 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--text2);
  overflow: hidden;
}
.skill-chip .sc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.skill-chip .sc-thumb.no-img { background: var(--bg4); }
.skill-chip .sc-name {
  color: var(--text);
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-chip .sc-type { display: none; }
.skill-chip .sc-x {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.skill-chip .sc-x:hover { background: var(--bg4); color: var(--red); }

/* 兼容旧 li-chip (如还残留) */
.li-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--bg4);
  border: 1px solid var(--border);
}
.li-chip.is-public { background: var(--bg3); }
.lc-name { font-weight: 500; color: var(--text); }
.lc-type { font-size: 10px; color: var(--text3); }
.lc-x {
  border: none;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 50%;
}
.lc-x:hover { color: var(--red); }

/* ── Skill 详情 Modal (对齐 prototype-02-skill-detail.html) ── */
.skill-detail-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 20px;
}
.skill-detail-modal[style*="display: flex"] { animation: sdMaskFade 0.2s ease-out; }
@keyframes sdMaskFade { from { opacity: 0; } to { opacity: 1; } }
.skill-detail-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.skill-detail-content {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 960px;
  max-width: 95vw;
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: sdModalSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sdModalSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
[data-theme="dark"] .skill-detail-content { box-shadow: 0 12px 48px rgba(0,0,0,0.55); }

/* 浮动 close button */
.skill-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.15s;
}
.skill-detail-close:hover { background: var(--bg3); color: var(--text); }
.skill-detail-close svg { width: 14px; height: 14px; }

/* Body (内部滚动) */
.skill-detail-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}
.skill-detail-body::-webkit-scrollbar { width: 6px; }
.skill-detail-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.skill-detail-body::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ════════ dtop: 左右两列 (meta | carousel) ════════ */
.sd-dtop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 28px 30px 18px;
}
.sd-dtop-left { min-width: 0; }
/* 专家详情:无轮播,单列铺满(评审 5.2——纯前端按 kind 分流,不需要新后端字段) */
.sd-dtop.sd-dtop-noimg { grid-template-columns: 1fr; }
.sd-renamebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border: none;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  vertical-align: middle;
  border-radius: 4px;
}
.sd-renamebtn:hover { color: var(--accent); background: var(--bg3); }
.sd-cbadge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text2);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.sd-dtitle {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.28;
  margin-bottom: 14px;
}
.sd-nchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
  font-size: 11.5px;
  color: var(--text2);
  margin-bottom: 14px;
}
.sd-nchip-label { color: var(--text3); }
.sd-nchip-val { color: var(--text2); }
.sd-cpybtn {
  border: none; background: transparent; cursor: pointer;
  color: var(--text3); font-size: 13px; padding: 2px 4px; border-radius: 4px;
  transition: all 0.15s;
}
.sd-cpybtn:hover { background: var(--bg3); color: var(--text); }
.sd-dquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-glow);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--text);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}
.sd-deck-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  font-size: 11px;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
}

/* ════════ Carousel (右列) ════════ */
.sd-dtop-right { min-width: 0; }
.sd-cbox {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 220px;
  position: relative;
  overflow: hidden;
}
.sd-cbox-empty { display: flex; align-items: center; justify-content: center; }
.sd-cempty { font-size: 12px; color: var(--text3); }
.sd-ctrack {
  display: flex;
  height: 100%;
  transition: transform 0.28s ease;
}
.sd-cslide {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.sd-cslide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg2);
}
.sd-cslide.img-fail img { display: none; }
.sd-carr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  color: var(--text2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all 0.15s;
}
.sd-carr:hover { background: var(--bg3); color: var(--text); }
.sd-carl { left: 8px; }
.sd-carr2 { right: 8px; }
.sd-ccnt {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ════════ methodology (SKILL.md body) ════════ */
.sd-methodology {
  padding: 18px 30px 8px;
  border-top: 1px solid var(--border);
}
.sd-methodology h2 { font-size: 18px; margin: 16px 0 8px; color: var(--text); }
.sd-methodology h3 { font-size: 16px; margin: 14px 0 6px; color: var(--text); }
.sd-methodology h4 { font-size: 14px; margin: 12px 0 4px; color: var(--text2); }
.sd-methodology p { font-size: 13px; color: var(--text2); line-height: 1.6; margin: 8px 0; }
.sd-methodology ul { padding-left: 20px; margin: 8px 0; }
.sd-methodology li { font-size: 13px; color: var(--text2); line-height: 1.5; margin: 4px 0; }
.sd-methodology strong { color: var(--text); font-weight: 600; }
.sd-methodology table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.sd-methodology th, .sd-methodology td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.sd-methodology th { background: var(--bg3); font-weight: 600; }

/* ════════ All Slides grid ════════ */
.sd-all-slides {
  padding: 16px 30px 24px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.sd-slides-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.sd-slides-title { font-size: 15px; font-weight: 600; color: var(--text); }
.sd-slide-count { font-size: 12px; color: var(--text3); }
.sd-slides-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sd-slide-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--bg3);
  transition: border-color 0.15s, transform 0.15s;
}
.sd-slide-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-slide-thumb:hover { border-color: var(--accent); transform: translateY(-2px); }
.sd-slide-thumb.active { border-color: var(--accent); }
.sd-sn {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 1px 6px;
  border-radius: 8px;
}

/* ════════ Footer (固定底部,按钮右对齐) ════════ */
.skill-detail-footer {
  padding: 14px 30px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg2);
  flex-shrink: 0;
}
.sd-foot-spacer { flex: 1; }
.sd-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  font-family: inherit;
  border: 1px solid transparent;
}
.sd-btn svg { width: 14px; height: 14px; }
.sd-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.sd-btn-primary:hover { opacity: 0.9; }
.sd-btn-ghost {
  background: var(--bg2);
  color: var(--text2);
  border-color: var(--border);
}
.sd-btn-ghost:hover { background: var(--bg3); color: var(--text); }
.sd-btn-danger {
  background: var(--bg2);
  color: var(--red);
  border-color: var(--border);
}
.sd-btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ── 删除确认 Modal ── */
.confirm-delete-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1001;
  align-items: center;
  justify-content: center;
}
.confirm-delete-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.confirm-delete-content {
  position: relative;
  background: var(--bg2);
  border-radius: 16px;
  padding: 28px;
  max-width: 400px;
  width: 90%;
}
.confirm-delete-title { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.confirm-delete-body { font-size: 14px; color: var(--text2); margin-bottom: 20px; line-height: 1.5; }
.confirm-delete-actions { display: flex; gap: 8px; justify-content: flex-end; }
.confirm-btn-ghost {
  padding: 8px 20px;
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.confirm-btn-danger {
  padding: 8px 20px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

/* ── +New Skill 弹窗 ── */
.create-skill-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.create-skill-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.create-skill-content {
  position: relative;
  background: var(--bg2);
  border-radius: 14px;
  padding: 20px 22px 22px;
  max-width: 380px;
  width: 88%;
  max-height: 80vh;
  overflow-y: auto;
}
.create-skill-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--text3);
  cursor: pointer;
}
.create-skill-back {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-skill-back:hover { color: var(--text); background: var(--bg3); border-radius: 6px; }
.create-skill-content h2 { font-size: 16px; margin-bottom: 16px; padding: 0 36px; text-align: center; }
.create-skill-options { display: flex; flex-direction: column; gap: 8px; }
.create-skill-option {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.create-skill-option:hover {
  border-color: var(--accent);
  background: var(--bg3);
}
.create-skill-option h3 { font-size: 14px; margin-bottom: 3px; }
.create-skill-option p { font-size: 11px; color: var(--text3); }

#createSkillPathContent { margin-top: 14px; }
#createSkillPathContent h3 { font-size: 14px; margin-bottom: 8px; }
#createSkillPathContent .hint { font-size: 12px; color: var(--text3); margin: 4px 0 10px; }
#createSkillPathContent p { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.cs-dropzone {
  padding: 20px 16px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.cs-dropzone:hover { border-color: var(--accent); }
.cs-dropzone p { font-size: 13px; color: var(--text2); margin-bottom: 3px; }
#createSkillPathContent textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}
#createSkillPathContent input[type="file"] {
  width: 100%;
  margin-bottom: 12px;
  font-size: 13px;
}
.cs-submit {
  width: 100%;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px;
}

/* ── user message 事件卡 (紧凑横向滚动) ── */
.msg-skill-applied-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-shrink: 0;
}
.msg-skill-applied-card .mac-header { display: none; }
.msg-skill-applied-card .mac-thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--bg4) 0%, var(--accent-glow) 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.msg-skill-applied-card .mac-thumb img { width: 100%; height: 100%; object-fit: cover; }
.msg-skill-applied-card .mac-thumb.no-img {
  background: var(--bg4);
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.05em;
}
.msg-skill-applied-card .mac-meta { display: flex; align-items: center; min-width: 0; }
.msg-skill-applied-card .mac-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.msg-skill-applied-card .mac-type { display: none; }
.msg-skill-applied-card-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.msg-skill-applied-card-group::-webkit-scrollbar { display: none; }
.msg-skill-applied-card-group .mac-group-label { display: none; }
.msg-skill-applied-card-group .mac-group-label svg { display: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}