/* ═══════════════════════════════════════════════════════════════
 * 技能/插件独立窗口 — 底部窗口 Tab（P1）
 * 适配现有主题变量（深/浅色自动联动），不引入硬编码配色
 * ═══════════════════════════════════════════════════════════════ */

/* 对话面板改为纵向 flex：消息区弹性伸缩，底部窗口 Tab 固定在最下方 */
#panel-chat.active { display: flex; flex-direction: column; }
#panel-chat.active > .chat-wrap { flex: 1 1 auto; min-height: 0; height: auto; }
#panel-chat > .window-tabs { flex: 0 0 auto; }

.window-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.window-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s;
  user-select: none;
}
.window-tab:hover { background: var(--hover-bg, var(--primary-dim)); border-color: var(--border-strong); }
.window-tab.active {
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
}
.window-tab.add {
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-dim);
}
.window-tab.add:hover { color: var(--primary); border-color: var(--primary); }

.window-tab .win-icon { font-size: 15px; line-height: 1; }
.window-tab .win-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.window-tab .win-close {
  margin-left: 4px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  opacity: .85;
}
.window-tab .win-close:hover { background: rgba(0,0,0,.22); opacity: 1; }
.window-tabs .win-tip {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-dim);
  padding-left: 8px;
  white-space: nowrap;
}

/* 技能选择器（底部弹出面板） */
.skill-picker {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 72px;
  width: min(720px, 92vw);
  min-width: 0;
  max-width: 92vw;
  max-height: 80vh;
  /* 上下滚动、左右固定 */
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-2, var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  z-index: 1200;
  backdrop-filter: blur(10px);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb, rgba(127,127,127,.38)) transparent;
}
.skill-picker::-webkit-scrollbar { width: 8px; height: 8px; }
.skill-picker::-webkit-scrollbar-track { background: transparent; }
.skill-picker::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb, rgba(127,127,127,.38));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.skill-picker::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover, rgba(127,127,127,.58));
  background-clip: padding-box;
}
.skill-picker h3 { font-size: 14px; color: var(--text); margin-bottom: 10px; font-weight: 600; }
.skill-picker .skill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.skill-picker .skill-item {
  min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  transition: background .15s, border-color .15s;
}
.skill-picker .skill-item:hover { background: var(--primary-dim); border-color: var(--primary); }
.skill-picker .skill-item .sk-icon { flex: 0 0 auto; font-size: 18px; }
.skill-picker .skill-item .sk-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 「即将上线」占位类目：虚线边 + 小角标，仍可点击（点击只提示） */
.skill-picker .skill-item.is-soon { border-style: dashed; opacity: .92; }
.skill-picker .skill-item.is-soon:hover { background: rgba(250,173,20,.10); border-color: #f0a020; }
.skill-picker .skill-item .sk-soon {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  color: #d48806;
  background: rgba(250,173,20,.16);
  border: 1px solid rgba(250,173,20,.45);
  border-radius: 999px;
}
.skill-picker .skill-empty { color: var(--text-dim); font-size: 13px; padding: 8px 0; }

@media (max-width: 640px) {
  .skill-picker { width: 94vw; max-height: 86vh; }
  .skill-picker .skill-list { grid-template-columns: 1fr; }
}

/* 技能窗口内的空态/欢迎 */
.skill-welcome {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  padding: 22px 12px;
  line-height: 1.7;
}
.skill-welcome .big { font-size: 30px; display: block; margin-bottom: 8px; }