@charset "UTF-8";
.wb-skill-rec-bar {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--wb-spacing-3, 8px);
  padding: 0 var(--wb-spacing-3, 8px);
  background: transparent;
  color: var(--wb-text-tertiary, #888888);
  font-size: 13px;
  line-height: 1.4;
  height: 32px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── loading 态：图标 + 文字 ── */
.wb-skill-rec-bar__loading {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-spacing-2, 6px);
  /* 不抢余量(0 1 auto):loading / placeholder / empty 三个文字态左侧内容都很短,
     若用 `flex: 1 1 auto` 会把 bar 剩余空间全吃下,把右侧 ✕ 推到容器最右,
     与设计稿「✕ 紧跟左侧内容」不符。 改成 `0 1 auto` —— 内容宽度撑开,
     空间不够时可收缩,不主动占余量;✕ 自然跟在右侧(间距由 bar 容器 `gap: 8px` 控制)。
     三态共用同款 flex 策略,见 `__placeholder` / `__empty`。 */
  flex: 0 1 auto;
  min-width: 0;
  color: var(--wb-text-tertiary, #999999);
  user-select: none;
}

.wb-skill-rec-bar__loading-anim {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: var(--wb-skill-rec-loading-sprite-light);
  background-repeat: no-repeat;
  background-size: 480px 16px; /* 30 帧 × 16px */
  background-position: 0 0;
  animation: wb-skill-rec-loading-frames 1s steps(30) infinite;
  /* 兼容 IDE 内 inverted-color / forced-colors 时 PNG 视觉降级（不强制反色） */
  forced-color-adjust: none;
}

/* 暗色主题：切到深色雪碧图。selector 与 colors.scss 已有的暗色入口对齐。 */
[data-theme=dark] .wb-skill-rec-bar__loading-anim,
body[data-vscode-theme-name="IDE Night"] .wb-skill-rec-bar__loading-anim,
body.vscode-dark .wb-skill-rec-bar__loading-anim,
.vscode-dark .wb-skill-rec-bar__loading-anim,
body.dark .wb-skill-rec-bar__loading-anim,
.dark .wb-skill-rec-bar__loading-anim {
  background-image: var(--wb-skill-rec-loading-sprite-dark);
}

@keyframes wb-skill-rec-loading-frames {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -480px 0;
  }
}
.wb-skill-rec-bar__loading-text {
  font-size: 13px;
  background: linear-gradient(100deg, var(--wb-text-tertiary, #999999) 0%, var(--wb-text-tertiary, #999999) 35%, var(--wb-text-primary, #1f1f1f) 50%, var(--wb-text-tertiary, #999999) 65%, var(--wb-text-tertiary, #999999) 100%);
  background-size: 200% 100%;
  /* 起点在最右，向左推 position 即让高光向右移动 */
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wb-skill-rec-wave 1.6s linear infinite;
}

@keyframes wb-skill-rec-wave {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ── 占位态：采纳后剩余 0 个候选时显示，引导用户继续输入 ── */
.wb-skill-rec-bar__placeholder {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-spacing-2, 6px);
  /* flex 策略与 __loading 一致,见那里的详细注释。 */
  flex: 0 1 auto;
  min-width: 0;
  color: var(--wb-text-tertiary, #999999);
  user-select: none;
}

.wb-skill-rec-bar__placeholder-icon {
  flex-shrink: 0;
  font-size: 14px;
  opacity: 0.7;
}

.wb-skill-rec-bar__placeholder-text {
  font-size: 13px;
  color: var(--wb-text-tertiary, #999999);
}

/* ── 空结果态：自动触发完成 + RPC 返回 0 候选时显示 ──
   视觉与 placeholder 同构(图标 + 文字),仅图标换成「搜索 + 闪光」(no-found.svg)、
   文案换成「暂无技能推荐」。 拆成独立 BEM 区块而非复用 __placeholder,
   是为了让设计在后续小改时(比如要给 empty 态加更弱的颜色 / 图标尺寸)互不干扰。
   颜色档位选择:与 chip 默认态(--wb-text-secondary #5a5a5a)对齐,而不是 placeholder
   的 tertiary(#999) —— empty 态左侧没有胶囊背景衬托,继续走 tertiary 会过浅难读;
   refresh / ✕ 同样是 secondary,这里保持一致避免轻重错位。 */
.wb-skill-rec-bar__empty {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-spacing-2, 6px);
  /* flex 策略与 __loading 一致,见那里的详细注释。 */
  flex: 0 1 auto;
  min-width: 0;
  color: var(--wb-text-secondary, #5a5a5a);
  user-select: none;
}

.wb-skill-rec-bar__empty-icon {
  flex-shrink: 0;
  /* no-found.svg viewBox 是 16×16,1em 跟 font-size 走;这里给个稳定显示尺寸,与 placeholder-icon 对齐。
     svg 内部已去掉 fill-opacity,直接走 currentColor —— 双重透明会让图标比文字明显更浅,与设计稿不符。 */
  font-size: 14px;
}

.wb-skill-rec-bar__empty-text {
  font-size: 13px;
  color: var(--wb-text-secondary, #5a5a5a);
}

/* ── showing 态：候选胶囊列表 ── */
.wb-skill-rec-bar__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-spacing-2, 8px);
  min-width: 0;
}

/* 「刷新推荐」按钮:icon + 文案,hover 整体变深。 */
.wb-skill-rec-bar__refresh {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: var(--wb-text-secondary, #5a5a5a);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wb-skill-rec-bar__refresh:hover {
  background: var(--wb-bg-hover, rgba(0, 0, 0, 0.06));
  color: var(--wb-text-primary, #1f1f1f);
}

.wb-skill-rec-bar__refresh:active {
  background: var(--wb-bg-active, rgba(0, 0, 0, 0.1));
}

/* 图标尺寸固定;svg 用 currentColor 跟随 button color。 */
.wb-skill-rec-bar__refresh-icon {
  width: 12px;
  height: 12px;
  display: block;
}

/* 「刷新推荐」文案:与 icon 同色同字号,通过 button gap 控制间距。 */
.wb-skill-rec-bar__refresh-label {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.wb-skill-rec-bar__close {
  flex-shrink: 0;
  /* 唯一关闭命中区：紧凑 ✕ 按钮 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  /* 与 refresh 按钮一致:secondary(#5a5a5a) 比 tertiary(#999) 深一档,
     视觉上和 chip 文字平衡,与设计稿对齐。 */
  color: var(--wb-text-secondary, #5a5a5a);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wb-skill-rec-bar__close:hover {
  background: var(--wb-bg-hover, rgba(0, 0, 0, 0.06));
  color: var(--wb-text-primary, #1f1f1f);
}

.wb-skill-rec-bar__close:active {
  background: var(--wb-bg-active, rgba(0, 0, 0, 0.1));
}

.vscode-dark .wb-skill-rec-bar,
.vscode-high-contrast .wb-skill-rec-bar {
  color: rgba(255, 255, 255, 0.55);
}
.vscode-dark .wb-skill-rec-bar__placeholder,
.vscode-dark .wb-skill-rec-bar__placeholder-text,
.vscode-high-contrast .wb-skill-rec-bar__placeholder,
.vscode-high-contrast .wb-skill-rec-bar__placeholder-text {
  color: rgba(255, 255, 255, 0.45);
}
.vscode-dark,
.vscode-high-contrast {
  /* empty 态对齐 chip 默认态(0.55),比 placeholder(0.45)深一档,
     理由同浅色:左侧没胶囊衬托,需要更清晰的视觉权重。 */
}
.vscode-dark .wb-skill-rec-bar__empty,
.vscode-dark .wb-skill-rec-bar__empty-text,
.vscode-high-contrast .wb-skill-rec-bar__empty,
.vscode-high-contrast .wb-skill-rec-bar__empty-text {
  color: rgba(255, 255, 255, 0.55);
}
.vscode-dark .wb-skill-rec-bar__refresh,
.vscode-dark .wb-skill-rec-bar__close,
.vscode-high-contrast .wb-skill-rec-bar__refresh,
.vscode-high-contrast .wb-skill-rec-bar__close {
  color: rgba(255, 255, 255, 0.45);
}
.vscode-dark .wb-skill-rec-bar__refresh:hover,
.vscode-dark .wb-skill-rec-bar__close:hover,
.vscode-high-contrast .wb-skill-rec-bar__refresh:hover,
.vscode-high-contrast .wb-skill-rec-bar__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
.vscode-dark .wb-skill-rec-bar__refresh:active,
.vscode-dark .wb-skill-rec-bar__close:active,
.vscode-high-contrast .wb-skill-rec-bar__refresh:active,
.vscode-high-contrast .wb-skill-rec-bar__close:active {
  background: rgba(255, 255, 255, 0.15);
}
.wb-skill-rec-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-spacing-2, 4px);
  padding: 0 var(--wb-spacing-3, 8px);
  border-radius: 8px;
  /* 设计稿要求 chip 不显示 border —— 与 mode-selector 这种半透明底胶囊一致,
     视觉权重靠背景色而非描边来体现。 */
  border: none;
  background: #F2F2F2;
  color: rgba(0, 0, 0, 0.9);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  /* 防止重置 button 默认 outline 让键盘可达性丢失 */
  outline-offset: 2px;
  height: 32px;
  box-sizing: border-box;
}

.wb-skill-rec-chip:not([data-adopted]) {
  /* 默认起始态:不可见 + 偏左 + 略小,等动画把它带回终态 */
  opacity: 0;
  transform: translateX(-12px) scale(0.92);
  /* forwards 保留终态(opacity:1, translate:0, scale:1),避免动画结束后回到起始 */
  animation: wb-skill-rec-chip-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  /* will-change 提示浏览器开 GPU 合成层(动画期短暂存在,不留长效内存占用) */
  will-change: opacity, transform;
}

@keyframes wb-skill-rec-chip-slide-in {
  from {
    opacity: 0;
    transform: translateX(-12px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-skill-rec-chip:not([data-adopted]) {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.wb-skill-rec-chip:hover:not(:disabled) {
  background: var(--wb-bg-hover, rgba(0, 0, 0, 0.04));
}

.wb-skill-rec-chip:active:not(:disabled) {
  background: var(--wb-bg-active, rgba(0, 0, 0, 0.08));
}

.wb-skill-rec-chip:disabled {
  cursor: progress;
}

.wb-skill-rec-chip--installing {
  opacity: 0.6;
}

.wb-skill-rec-chip--adopted {
  opacity: 0.6;
  cursor: not-allowed;
}

.wb-skill-rec-chip--adopted:disabled {
  cursor: not-allowed;
}

.wb-skill-rec-chip__icon {
  flex: 0 0 auto;
  /* 技能 icon 设计稿尺寸 16×16，svg width/height=1em 故用 font-size 控尺寸 */
  font-size: 16px;
  /* 颜色完全跟随 currentColor（chip 文字色），WbSkillsIcon 内置 fill-opacity=0.9
     在浅色下叠加上 chip 的 90% 黑后视觉差异极小，深色模式下重置为 1（见下方主题块） */
}

.wb-skill-rec-chip__name {
  /* 防止超长名干扰布局：单行省略，maxWidth 给个保守值，溢出 chip 降级 ellipsis */
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-skill-rec-chip__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1;
}

.wb-skill-rec-chip__add-icon {
  flex: 0 0 auto;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
}

.wb-skill-rec-chip__spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--wb-border-weak, rgba(0, 0, 0, 0.15));
  border-top-color: var(--wb-text-link, #2563eb);
  border-radius: 50%;
  animation: wb-skill-rec-chip-spin 0.75s linear infinite;
}

@keyframes wb-skill-rec-chip-spin {
  to {
    transform: rotate(360deg);
  }
}
.vscode-dark .wb-skill-rec-chip,
.vscode-high-contrast .wb-skill-rec-chip {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}
.vscode-dark .wb-skill-rec-chip__icon path,
.vscode-high-contrast .wb-skill-rec-chip__icon path {
  fill-opacity: 1;
}
.vscode-dark .wb-skill-rec-chip:hover:not(:disabled),
.vscode-high-contrast .wb-skill-rec-chip:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.vscode-dark .wb-skill-rec-chip:active:not(:disabled),
.vscode-high-contrast .wb-skill-rec-chip:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}
.vscode-dark .wb-skill-rec-chip__add-icon,
.vscode-high-contrast .wb-skill-rec-chip__add-icon {
  color: rgba(255, 255, 255, 0.7);
}
.vscode-dark,
.vscode-high-contrast {
  /* spinner 在深色下边框需要更亮才看得见。 */
}
.vscode-dark .wb-skill-rec-chip__spinner,
.vscode-high-contrast .wb-skill-rec-chip__spinner {
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.85);
}
.wb-skill-rec-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-spacing-2, 4px);
}

.wb-skill-rec-loading__chip {
  display: inline-block;
  /* 形状对齐 .wb-skill-rec-chip：高度 24px、圆角 999px、占位宽度 80px（≈典型 skill name 视觉）。 */
  width: 80px;
  height: 24px;
  border-radius: 999px;
  /* 底色 + 一束高光：高光居中亮、两侧暗，靠 background-position 横向位移形成扫光。 */
  background: linear-gradient(90deg, var(--wb-bg-secondary, rgba(0, 0, 0, 0.04)) 0%, var(--wb-bg-hover, rgba(0, 0, 0, 0.1)) 50%, var(--wb-bg-secondary, rgba(0, 0, 0, 0.04)) 100%);
  background-size: 200% 100%;
  /* 从左往右：起点高光在左侧（-100%），终点扫到右侧（100%）。 */
  animation: wb-skill-rec-loading-wave 1.4s ease-in-out infinite;
}

/* 多个骨架时，让相邻 chip 的波浪略有相位差，看起来像一整条波浪连续扫过。 */
.wb-skill-rec-loading__chip:nth-child(2) {
  animation-delay: 0.18s;
}

.wb-skill-rec-loading__chip:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes wb-skill-rec-loading-wave {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}