/* === 10-feature-panel.css (原 user.css L3722-L4351,Section 13.5 功能面板 — 系统助手用户覆盖层) === */

/* ========================================
   13.5 功能面板（系统助手用户覆盖层）
   设计源：xhtml_collaboration/xhtml_delivery.html（外部设计方交付）
   原则：所有颜色/间距使用项目现有变量体系，不新增 :root token
   ======================================== */

/* 默认：完全隐藏（PC 通过 has-feature-panel 显示，移动端通过 feature-panel-open 显示）*/
.feature-panel { display: none; }
.feature-panel-backdrop { display: none; }
/* 移动端专属顶栏 + 触发按钮，默认在 PC 不显示 */
.feature-panel .panel-mobile-header { display: none; }
#btn-mobile-panel { display: none; }

/* PC:第 4 列布局状态与面板视觉状态分离。
   列宽只在进出边界各落位一次;动画阶段只动面板 transform/opacity,
   避免长对话正文在 300ms 内逐帧重新换行和布局。 */
@media (min-width: 1024px) {
  body.has-feature-panel {
    grid-template-columns:
      var(--pc-nav-width)
      var(--pc-sidebar-width)
      minmax(0, 1fr);
  }
  body.has-feature-panel.feature-panel-layout-open {
    grid-template-columns:
      var(--pc-nav-width)
      var(--pc-sidebar-width)
      minmax(0, 1fr)
      var(--pc-feature-panel-width);
  }

  /* P428-2:面板根改为"布局壳"——本身去 .glass-panel 视觉(transparent),
     视觉主体下沉到 .panel-scroll-area(成独立卡)+ .panel-footer(无壳漂浮)。
     panel 仍撑满第 4 列高度作为定位框架,内部卡片自适应内容,中间留白让位。 */
  body.has-feature-panel .feature-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: visible;          /* P428-2:让 scroll-area 卡的 shadow 不被裁 */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: calc(var(--app-height, 100dvh) - var(--pc-shell-padding) * 2);
    opacity: 0;
    transform: translate3d(20px, 0, 0);
    pointer-events: none;
    will-change: transform, opacity;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: right center;
  }
  body.has-feature-panel:not(.feature-panel-layout-open) .feature-panel {
    display: none;
  }
  /* P428-2:scroll-area 接管卡片视觉(原 .glass-panel 那套),flex:0 1 auto
     让卡片高度跟内容走:内容少 → 卡占 content 高 + footer margin-top:auto 沉底 +
     中间留白(图 5 设计);内容多 → flex shrink(1)收缩到 panel 可用空间,内部
     overflow-y:auto 触发 scroll,footer 仍稳坐底部。
     `min-height: 0` 是关键:flex item 默认 min-height:auto = 内容自然高度,会阻止
     收缩 → footer 被挤出 panel。加 min-height:0 解除最小限制,审核员明示要求。
     原 max-height:100% 已去掉:100% = panel 全高,反而让 scroll-area 可超出
     "应留给 footer 的空间",治标不治本。 */
  body.has-feature-panel .feature-panel .panel-scroll-area {
    flex: 0 1 auto;
    min-height: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-ambient);
  }
  /* P428-2:footer 沉到 panel 底部(margin-top:auto),去渐变 bg 和 border-top,
     按钮直接漂在底色上(无外壳),与图 5 设计一致 */
  body.has-feature-panel .feature-panel .panel-footer {
    margin-top: auto;
    background: transparent;
    border-top: none;
  }
  body.has-feature-panel.feature-panel-visible .feature-panel {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  body #app-main { transition: none; }

  /* 折叠/展开按钮：仅在面板存在时显示 */
  #btn-toggle-panel { display: none; }
  body.has-feature-panel #btn-toggle-panel { display: flex; }
  #btn-toggle-panel .toggle-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.feature-panel-collapsed #btn-toggle-panel .toggle-icon {
    transform: rotate(180deg);
  }
}

/* 移动端：右侧抽屉模式
   PC 折叠按钮 #btn-toggle-panel 在移动端不需要（触发由 #btn-mobile-panel 接管）
   面板默认 fixed 在屏幕外，body.feature-panel-open 时滑入 + backdrop 显示 */
@media (max-width: 1023px) {
  #btn-toggle-panel { display: none; }
  #btn-mobile-panel { display: flex; }

  .feature-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 88vw;
    max-width: 380px;
    height: 100dvh;
    z-index: 201;
    padding: 0;
    overflow: hidden;
    background: var(--bg-layer-2);
    border-left: 1px solid var(--border-glass);
    box-shadow: var(--shadow-ambient);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  body.feature-panel-open .feature-panel {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* 移动端顶栏（PC 隐藏的 .panel-mobile-header 在此打开）*/
  .feature-panel .panel-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    padding-top: calc(var(--space-4) + var(--app-top-inset));
    border-bottom: 1px solid var(--border-glass);
    flex-shrink: 0;
  }
  .feature-panel .panel-mobile-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: 0.02em;
  }

  /* 内层尺寸适配:scroll-area 顶部已被 mobile-header 占,适当减少 padding */
  .feature-panel .panel-scroll-area {
    padding-top: var(--space-4);
  }
  .feature-panel .panel-footer {
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }

  /* Backdrop:复用 modal-overlay 同款 shadow-deep + blur,视觉一致 */
  .feature-panel-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--shadow-deep);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
  }
  body.feature-panel-open .feature-panel-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── 滚动区:唯一滚动容器,footer 在外粘底 ── */
.feature-panel .panel-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-6) var(--space-4) 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.feature-panel .panel-scroll-area::-webkit-scrollbar {
  width: 0; height: 0; display: none;
}

/* ── 区段基础:用底部微弱高光分割线代替生硬 border ── */
.feature-panel .panel-section {
  position: relative;
  margin-bottom: var(--space-8);
}
.feature-panel .panel-section::after {
  content: '';
  position: absolute;
  bottom: calc(var(--space-8) / -2);
  left: 10%; right: 10%;
  height: 1px;
  background: radial-gradient(circle, var(--border-glass) 0%, transparent 100%);
  pointer-events: none;
}
.feature-panel .panel-section:last-child::after { display: none; }

/* ── 区段标题 ── */
.feature-panel .panel-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
}

/* 区段右上角 "+" 按钮(kb-create / task-create 共用) */
.feature-panel .panel-section-title .section-add {
  position: relative;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px; font-weight: 700;
  transition: all var(--transit-fast);
}
.feature-panel .panel-section-title .section-add::after {
  content: ''; position: absolute; inset: -8px;
}
.feature-panel .panel-section-title .section-add:hover {
  background: var(--bg-hover);
  color: var(--text-main);
  transform: scale(1.05);
}

/* ── 单条 skill / kb item:去水平 padding,::before 负边距热区铺满 ── */
.feature-panel .skill-item-mock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: var(--space-2) 0;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  gap: var(--space-3);
  transition: background var(--transit-fast);
}
.feature-panel .skill-item-mock::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background var(--transit-fast);
  z-index: -1;
  pointer-events: none;
}
.feature-panel .skill-item-mock:hover::before {
  background: var(--bg-hover);
}
.feature-panel .skill-item-mock:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.feature-panel .skill-item-mock .item-label {
  flex: 1;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: var(--space-2);
  transition: color var(--transit-fast);
}
.feature-panel .skill-item-mock.off .item-label { color: var(--text-muted); }

/* 系统自带徽章 */
.feature-panel .skill-item-mock .item-badge {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--text-dim);
  border: 1px solid var(--border-glass);
  letter-spacing: 0.3px;
}
.feature-panel .skill-item-mock.locked {
  cursor: default;
}
.feature-panel .skill-item-mock.locked:hover::before {
  background: transparent;
}

/* KB 管理文件按钮:默认隐身,hover/focus 才出 */
.feature-panel .skill-item-mock .item-action {
  position: relative;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity var(--transit-fast), transform var(--transit-fast),
              background var(--transit-fast), color var(--transit-fast);
  flex-shrink: 0;
}
.feature-panel .skill-item-mock .item-action::after {
  content: ''; position: absolute; inset: -6px;
}
.feature-panel .skill-item-mock:hover .item-action,
.feature-panel .skill-item-mock .item-action:focus-visible {
  opacity: 1;
  transform: translateX(0);
}
.feature-panel .skill-item-mock .item-action:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}
.feature-panel .skill-item-mock .item-action svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
}
.feature-panel .skill-item-mock.off .item-action {
  opacity: 0;
  pointer-events: none;
}

/* ── Toggle 精致极简式开关:14px 小圆球 ── */
.feature-panel .toggle-mock {
  width: 32px; height: 18px;
  background: var(--brand-primary);
  border-radius: var(--radius-full);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  transition: background var(--transit-normal);
}
.feature-panel .toggle-mock::after {
  content: '';
  position: absolute;
  top: 2px; left: 16px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-on-color);
  /* P414:硬编码阴影归一到统一柔影 token(toggle 滑块立体感功能性,保留单层) */
  box-shadow: var(--shadow-ambient);
  transition: left var(--transit-normal), background var(--transit-normal);
}
.feature-panel .toggle-mock.off,
.feature-panel .skill-item-mock.off .toggle-mock {
  background: var(--bg-layer-1);
  border: 1px solid var(--border-light);
}
.feature-panel .toggle-mock.off::after,
.feature-panel .skill-item-mock.off .toggle-mock::after {
  left: 2px;
  background: var(--text-muted);
  box-shadow: none;
}
/* 系统自带:不显示开关(badge 代替) */
.feature-panel .skill-item-mock.locked .toggle-mock { display: none; }

/* ── 智能技能模式卡片(模式层,区别于下方 skill 配置层)── */
.feature-panel .smart-mode-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transit-normal), border-color var(--transit-normal);
}
.feature-panel .smart-mode-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}
.feature-panel .smart-mode-card.active {
  background: transparent;
  border-color: var(--border-glass);
}
.feature-panel .smart-mode-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.feature-panel .smart-mode-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.3;
}
.feature-panel .smart-mode-pill {
  padding: 1px 6px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
}
.feature-panel .smart-mode-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── 空状态 ── */
.feature-panel .panel-empty {
  font-size: 13px;
  color: var(--text-dim);
  padding: var(--space-4) 0;
  text-align: center;
}

/* ── 已挂载 / 未挂载 列表与折叠 ── */
.feature-panel .mounted-list,
.feature-panel .unmounted-list {
  display: flex;
  flex-direction: column;
}
.feature-panel .unmounted-list {
  display: none;
  margin-top: var(--space-2);
}
.feature-panel .panel-section.expanded .unmounted-list {
  display: flex;
}
.feature-panel .mounted-overflow {
  display: flex;
  flex-direction: column;
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-panel .mounted-list.is-folded .mounted-overflow {
  max-height: 0;
}

/* 折叠按钮:双 span 切显隐(JS 输出 .fold-expand + .fold-shrink),左对齐 */
.feature-panel .panel-fold-btn {
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2) 0;
  background: none; border: none;
  color: var(--text-dim);
  font-size: 12px; font-family: inherit; font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--space-1);
  text-align: left;
  transition: color var(--transit-fast);
  position: relative; z-index: 1;
}
.feature-panel .mounted-list.is-folded .panel-fold-btn::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  height: 32px;
  background: linear-gradient(to top, var(--bg-glass), transparent);
  pointer-events: none;
}
.feature-panel .panel-fold-btn:hover { color: var(--text-main); }
.feature-panel .panel-fold-btn .fold-chevron {
  width: 12px; height: 12px;
  transition: transform var(--transit-normal);
  flex-shrink: 0;
}
.feature-panel .mounted-list:not(.is-folded) .panel-fold-btn .fold-chevron {
  transform: rotate(180deg);
}
.feature-panel .mounted-list.is-folded .panel-fold-btn .fold-shrink { display: none; }
.feature-panel .mounted-list:not(.is-folded) .panel-fold-btn .fold-expand { display: none; }

/* "获取更多"按钮:dashed 轻盈,展开态变实线暗色(次级动作) */
.feature-panel .panel-more-btn {
  width: 100%;
  margin-top: var(--space-3);
  padding: 8px var(--space-4);
  background: transparent;
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  transition: all var(--transit-fast);
}
.feature-panel .panel-more-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
  color: var(--text-main);
}
.feature-panel .panel-more-btn .more-count {
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 2px;
}
.feature-panel .panel-more-btn:hover .more-count {
  color: inherit;
  opacity: 0.7;
}
.feature-panel .panel-more-btn .less-label { display: none; }
.feature-panel .panel-section.expanded .panel-more-btn .more-label { display: none; }
.feature-panel .panel-section.expanded .panel-more-btn .less-label { display: inline; }
.feature-panel .panel-section.expanded .panel-more-btn {
  border-style: solid;
  border-color: var(--border-glass);
  color: var(--text-dim);
}
.feature-panel .panel-section.expanded .panel-more-btn:hover {
  color: var(--text-main);
  border-color: var(--border-light);
  background: var(--bg-hover);
}

/* ── Skill 分类分组(P238 引入,保留) ── */
.feature-panel .skill-search-wrap { margin-bottom: var(--space-2); }
.feature-panel .skill-search-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px; font-family: inherit;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transit-fast);
  box-sizing: border-box;
}
.feature-panel .skill-search-input:focus { border-color: var(--brand-border); }
.feature-panel .skill-search-input::placeholder { color: var(--text-dim); }

.feature-panel .skill-category { margin-bottom: var(--space-3); }
.feature-panel .skill-category:last-child { margin-bottom: 0; }
.feature-panel .skill-category-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.feature-panel .skill-category-title .category-icon {
  opacity: 0.75; flex-shrink: 0;
}
.feature-panel .skill-category-count {
  font-weight: 400;
  color: var(--text-dim);
  opacity: 0.6;
}
.feature-panel .skill-category-body {
  display: flex;
  flex-direction: column;
}

/* ── 底部 footer:渐变融合减少割裂感 ── */
.feature-panel .panel-footer {
  padding: var(--space-4) var(--space-4);
  background: linear-gradient(to top, var(--bg-surface) 60%, transparent);
  border-top: 1px solid var(--border-glass);
  flex-shrink: 0;
  z-index: 10;
}
.feature-panel .panel-actions {
  display: flex;
  gap: var(--space-3);
}
.feature-panel .panel-btn {
  flex: 1;
  min-height: 40px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: var(--bg-hover);
  color: var(--text-main);
  border: 1px solid transparent;
  transition: all var(--transit-fast);
}
.feature-panel .panel-btn:hover:not(:disabled) {
  background: var(--bg-active);
}

/* 主按钮:P412 token 化(深色版黑字金底 / 浅色版白字墨黑底 — 高对比度通用) */
.feature-panel .panel-btn.primary {
  background: var(--bg-cta-primary);
  color: var(--text-on-color);
  border: none;
  font-weight: 600;
}
.feature-panel .panel-btn.primary:hover:not(:disabled) {
  background: var(--bg-cta-primary-hover);
  transform: translateY(-1px);
  /* P413 扁平化:统一柔影 token */
  box-shadow: var(--shadow-ambient);
}
.feature-panel .panel-btn.primary:active:not(:disabled) { transform: translateY(0); }
.feature-panel .panel-btn:disabled { opacity: 0.38; cursor: not-allowed; }

/* 尊重用户减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .feature-panel,
  .feature-panel *,
  .feature-panel *::before,
  .feature-panel *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}