/* ============================================================
 * service/components.css
 * 通用组件: toast/confirm/breadcrumb/empty/search/page-header/persona-modal/page-toolbar/pinned-pager/list-frame
 * 来源 app.css L3735-3867 + L3868-4151 + L5214-5525 + L6401-6574 + L6575-6653 + L6654-6891
 * ============================================================ */

/* =========================================================
   通用工具组件:Toast / Confirm / Breadcrumb / Empty / Search
   ========================================================= */

/* Toast 撤销按钮 */
.pve-toast {
  min-width: 240px;
  max-width: 360px;
}
.pve-toast-undo-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-weight: 500;
}
.pve-toast-undo-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* loader-2 spin(给 Tailwind animate-spin 兜底) */
.animate-spin { animation: spin 0.9s linear infinite; }

/* 面包屑 */
.pve-bc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.pve-bc .pve-bc-link {
  color: var(--color-muted);
  transition: color 0.15s ease;
}
.pve-bc .pve-bc-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.pve-bc .pve-bc-current {
  color: #0F172A;
  font-weight: 500;
}

/* 空态 */
.pve-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-muted);
}
.pve-empty .pve-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--color-muted-bg);
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pve-empty .pve-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}
.pve-empty .pve-empty-desc {
  font-size: 12px;
  color: var(--color-muted);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 列表搜索条 */
.pve-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pve-search input {
  padding: 6px 10px 6px 30px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: white;
  font-size: 13px;
  width: 240px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pve-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.pve-search .pve-search-ico {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: #94A3B8;
  pointer-events: none;
}
.pve-search .pve-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E2E8F0;
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pve-search input:not(:placeholder-shown) ~ .pve-search-clear {
  display: inline-flex;
}


/* ============================================================
 * 列表/管理页 标准页头与页面骨架
 * 用 .pve-page-header + .pve-page-body 替代各页面自定义的 header/page 样式
 *
 * — 节奏 token (PC 端整体布局基准) —
 *  --pve-gutter-x:  窄列横向 padding,page-header / page-narrow / pinned-pager 共用,
 *                   保证三者左右边缘严格垂直对齐(标题 / 按钮 / 卡片同一条 gridline)
 *  --pve-page-max:  窄列最大宽度,大屏适度放宽,3 列卡片网格仍保持紧凑
 *  --pve-section-y: section 之间的纵向节奏,clamp() 让窄/宽屏自适应
 * ============================================================ */
:root {
  --pve-gutter-x: clamp(20px, 2.5vw, 40px);
  --pve-page-max: 1440px;
  --pve-section-y: clamp(14px, 1.4vw, 22px);
}
.pve-page-header {
  padding: 32px var(--pve-gutter-x) 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /* 右侧自适应吃满 main 可用宽度;呼吸感由 --pve-gutter-x 的 padding-inline 控制,
     与下方 .pve-page-narrow 同步贴左、不再受 --pve-page-max 上限约束 */
}
.pve-page-header-copy {
  min-width: 0;
  flex: 1;
}
.pve-page-title {
  font-size: 22px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pve-page-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.5;
}
.pve-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* `.pve-page-body` 已逻辑废弃:用 display:contents 退化为透明壳,DOM 不动,
 * 容器尺寸 / padding / flex 内部滚动职责全部下沉到 `.pve-page-narrow`。
 * 注意:模块 CSS 中 `main > .pve-page-body > .pve-page-narrow` 的选择器仍能命中,
 * 但 body 自身的 flex/overflow/display 等属性会因 display:contents 失效,
 * 因此那些属性必须迁移到对应的 `> .pve-page-narrow` 规则块。 */
.pve-page-body {
  display: contents;
}
.pve-page-narrow {
  /* 右侧自适应吃满 main 可用宽度;
     呼吸感 = padding-inline: var(--pve-gutter-x),与上方 .pve-page-header 同步贴左 */
  width: 100%;
  padding: 24px var(--pve-gutter-x) 40px;
  display: flex;
  flex-direction: column;
  gap: var(--pve-section-y);
}
.pve-page-narrow > section {
  margin: 0;
}

/* sidebar 收起态:取消 .pve-page-header / .pve-page-narrow 的窄列上限,
 * 让主区内容真正吃满 sidebar 腾出来的 ~194px,而不是只在右侧多出空白条。
 * 标记类由 PVE.applySidebarState 写在 <html> 上 (assets/js/app.js:680+)。 */
html.pve-sidebar-collapsed .pve-page-header,
html.pve-sidebar-collapsed .pve-page-narrow {
  max-width: none;
}

/* 平板过渡：避免 768→桌面 之间内容贴边 */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --pve-gutter-x: 24px;
    --pve-section-y: 16px;
  }
  .pve-page-narrow {
    padding-top: 20px;
    padding-bottom: 32px;
  }
}

/* 大屏 / 超宽屏:仅放宽 max-width,padding 节奏由 --pve-gutter-x 统一管理。
   实际内容宽 = min(max-width, 视口可用宽) - 2*gutter-x
   - 默认 (≥1025): max 1440 / gutter ~32 / 内容 ≤ 1376
   - 1600+:        max 1600 / gutter 40   / 内容 ≤ 1520
   - 1920+:        max 1760 / gutter 48   / 内容 ≤ 1664
   3 列卡片网格在最宽档的单卡 ≈ 540px,仍在舒适密度内。 */
@media (min-width: 1600px) {
  :root {
    --pve-page-max: 1600px;
    --pve-gutter-x: 40px;
  }
}
@media (min-width: 1920px) {
  :root {
    --pve-page-max: 1760px;
    --pve-gutter-x: 48px;
  }
}

/* 标准主按钮 */
.pve-btn-primary {
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px -10px rgba(37, 99, 235, 0.45);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pve-btn-primary:hover {
  background: #1d4ed8;
}
.pve-btn-ghost {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pve-btn-ghost:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* 页头版搜索框（基于 .pve-search，加 .pve-search-md 修饰符） */
.pve-search.pve-search-md input {
  width: 260px;
  height: 36px;
  padding: 0 12px 0 34px;
  border-radius: 10px;
  font-size: 13px;
}
.pve-search.pve-search-md .pve-search-ico {
  width: 15px;
  height: 15px;
  left: 11px;
}

/* 窄屏 */
@media (max-width: 768px) {
  .pve-page-header {
    padding: 24px 20px 14px;
    flex-direction: column;
    align-items: stretch;
  }
  /* 移动端：标题与副标题尽量同一行，溢出时副标题自动换到下一行 */
  .pve-page-header-copy {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 4px;
    min-width: 0;
  }
  .pve-page-title {
    font-size: 18px;
    line-height: 1.3;
    flex-shrink: 0;
  }
  .pve-page-subtitle {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #94a3b8;
    flex: 1 1 auto;
    min-width: 0;
    /* 取消桌面端的多行截断，自然换行 */
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: initial;
    line-clamp: initial;
  }
  .pve-page-body {
    /* 已 display:contents,移动端 padding 下沉到 .pve-page-narrow */
  }
  /* 移动端：narrow padding-inline=0 后,gutter token 不再代表 narrow 的 padding,
     仅作为吸底分页器 / 工具条等 sticky 元素的内部气孔保留 16px。
     具体的 .pve-pinned-pager margin-inline 由下方 ≤768 覆盖归零。 */
  :root {
    --pve-gutter-x: 16px;
  }
  /* 内容窄列：移动端取消桌面 max-width 限制，使用更紧凑的纵向节奏。
     padding-inline = 0 让卡片 / section 与视口完全贴边占满；
     横向气孔(若需要)由具体子模块通过 padding 自行声明。 */
  .pve-page-narrow {
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* 仅保留上下 padding；左右去掉 16px gutter，铺满视口宽 */
    padding: 16px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* flex 容器自身允许收缩，避免不可压缩子项把列撑到视口外 */
    min-width: 0;
    box-sizing: border-box;
    /* 防御性兜底：任何子项(长 URL / 宽表 / 横滑条) 即便溢出，
       也只在窄列内部裁剪，不会传染到 <html> 触发页面横滑。
       overflow-x:clip 不创建滚动容器，sticky 仍正常工作；
       不支持 clip 的旧内核退化到 hidden。 */
    overflow-x: hidden;
    overflow-x: clip;
  }
  /* 窄列直接子项默认禁止横向溢出贡献：
     需要横滑的元素请显式声明 .x-scroll 自己处理 overflow-x:auto。 */
  .pve-page-narrow > * {
    min-width: 0;
    max-width: 100%;
  }
  /* 窄列内直接子节区（section）：彼此之间留出节奏感 */
  .pve-page-narrow > section {
    margin-bottom: 0;
  }
  /* 卡片类直接子项：移动端统一圆角与边距，避免参差 */
  .pve-page-narrow > .pve-card,
  .pve-page-narrow > section > .pve-card {
    border-radius: 14px;
  }
  .pve-page-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .pve-search.pve-search-md {
    flex: 1;
  }
  .pve-search.pve-search-md input {
    width: 100%;
  }
}

/* 更窄的手机屏，进一步压缩 */
@media (max-width: 380px) {
  .pve-page-header {
    padding: 18px 14px 10px;
  }
  .pve-page-body {
    /* 已 display:contents,padding 下沉到 .pve-page-narrow */
  }
  /* 极窄屏：再次把 gutter token 收到 12px，与窄列 padding 对齐，
     使 .pve-pinned-pager 的负 margin-inline 等量抵消，不外溢。 */
  :root {
    --pve-gutter-x: 12px;
  }
  .pve-page-narrow {
    /* 极窄屏：左右仍贴边，上下进一步收紧 */
    padding: 12px 0 24px;
    gap: 10px;
  }
  .pve-page-header-copy {
    column-gap: 8px;
  }
  .pve-page-title {
    font-size: 17px;
  }
  .pve-page-subtitle {
    font-size: 11.5px;
  }
}


/* ====== 生长 · 个性化画像 弹窗 ====== */
.persona-modal {
  position: relative;
  width: 600px;
  max-width: 92vw;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -30px rgba(15, 23, 42, 0.35),
    0 12px 30px -16px rgba(99, 102, 241, 0.25);
}

.persona-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  z-index: 2;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.persona-close:hover {
  background: #ffffff;
  color: #0f172a;
  transform: rotate(90deg);
}

.persona-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px 22px;
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(236, 72, 153, 0.22), transparent 60%),
    radial-gradient(500px 220px at 0% 100%, rgba(59, 130, 246, 0.18), transparent 65%),
    linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: #ffffff;
  overflow: hidden;
}
.persona-hero-glow {
  position: absolute;
  inset: -40% -10% auto auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 70%);
  pointer-events: none;
}
.persona-hero-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 18px -10px rgba(15, 23, 42, 0.4);
  flex-shrink: 0;
}
.persona-hero-copy {
  position: relative;
  flex: 1;
  min-width: 0;
}
.persona-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}
.persona-hero-name {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.persona-hero-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.persona-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.persona-hero-dot {
  width: 3px !important;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  display: inline-block !important;
  padding: 0 !important;
}

.persona-intro {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 22px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.14);
  color: #475569;
  font-size: 12.5px;
  line-height: 1.6;
}
.persona-intro i {
  color: #6366f1;
  flex-shrink: 0;
  margin-top: 2px;
}

.persona-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 22px 10px;
}
.persona-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.persona-section-pill {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  font-size: 11px;
  font-weight: 500;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 22px;
}

.persona-card {
  --persona-accent: #6366f1;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid #eef2f7;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--persona-accent) 3%, #ffffff) 0%, #ffffff 100%);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.persona-card:hover {
  border-color: color-mix(in srgb, var(--persona-accent) 30%, #e2e8f0);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--persona-accent) 60%, rgba(15, 23, 42, 0.4));
}
.persona-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--persona-accent);
  background: color-mix(in srgb, var(--persona-accent) 12%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--persona-accent) 22%, transparent);
}
.persona-card-body {
  flex: 1;
  min-width: 0;
}
.persona-card-label {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.persona-card-value {
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
}
.persona-card-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
}
.persona-tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.persona-tag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--persona-accent);
  background: color-mix(in srgb, var(--persona-accent) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--persona-accent) 22%, transparent);
}

.persona-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 22px 20px;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
}
.persona-foot-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #94a3b8;
}
.persona-foot-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.persona-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.persona-btn-ghost {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
}
.persona-btn-ghost:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}
.persona-btn-primary {
  border: none;
  color: #ffffff;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  box-shadow:
    0 10px 22px -14px rgba(99, 102, 241, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.persona-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px -14px rgba(99, 102, 241, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.persona-btn-primary:active {
  transform: translateY(0);
}

@media (max-width: 640px) {
  .persona-modal { width: 94vw; }
  .persona-hero { padding: 20px 18px 18px; gap: 12px; }
  .persona-hero-name { font-size: 19px; }
  .persona-grid { grid-template-columns: 1fr; margin: 0 18px; }
  .persona-intro { margin: 14px 18px 0; }
  .persona-section-head { margin: 16px 18px 10px; }
  .persona-foot { flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 18px 18px; }
  .persona-foot-actions { justify-content: flex-end; }
}


/* ============================================================
 * 通用：页面工具条 .pve-page-toolbar
 *
 * 适用场景：列表页 narrow 容器内顶部的「tabs + 操作按钮」横条，
 * 例如 工作流 / 智能体广场 / 资源库 等三件套。
 *
 * 结构（HTML）：
 *   <div class="pve-page-toolbar">
 *     <div class="pve-page-toolbar-tabs-row">     // 可选：左 pin + tabs 同行容器
 *       <div class="pve-page-toolbar-pin"> 全部 </div>   // 钉左、不参与横滑
 *       <div class="pve-page-toolbar-tabs"> ... </div>   // 横滑 tabs
 *     </div>
 *     <div class="pve-page-toolbar-actions"> ... </div>  // 钉右、不参与横滑
 *   </div>
 *
 * 修饰类：
 *   .pve-page-toolbar--framed  桌面端带边框/圆角/毛玻璃的「卡片化」装饰
 *
 * 桌面端（>860）：通用 flex 布局；移动端（≤860）：单行 sticky 毛玻璃 + 横滑 tabs。
 * sticky top 由 --page-header-h 决定（app.js syncPageHeaderHeight 实时计算）。
 * .pve-page-narrow 不能 overflow:hidden，否则 sticky 会被滚动祖先劫持。
 * ============================================================ */
/* 桌面端 & 全局：基础 flex 布局（不带装饰，由各页或修饰类负责） */
.pve-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.pve-page-toolbar-tabs-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1 1 auto;
}
.pve-page-toolbar-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* 修饰类：卡片化外观（边框 + 圆角 + 毛玻璃，原 .workflow-toolbar 视觉） */
.pve-page-toolbar--framed {
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px -22px rgba(15, 23, 42, 0.18);
}

@media (max-width: 860px) {
  /* 紧靠顶部「无缝吸顶」根治方案：
     当 toolbar 是 narrow 的第一个直接子时，直接把 narrow 的 padding-top 归零，
     由 toolbar 自身的 padding 负责呼吸 —— 不再随断点反复调 margin-top 偏移量。 */
  .pve-page-narrow:has(> .pve-page-toolbar:first-child) {
    padding-top: 0;
  }
  /* 不支持 :has() 的旧内核兜底：用负 margin-top 抵消各档 narrow 的 padding-top。
     由于 :has() 已是 Baseline，正常情况下走上面的规则，下面只在 :has 不识别时生效。 */
  .pve-page-narrow > .pve-page-toolbar:first-child {
    margin-top: 0;
  }
  /* 页头底部不再留 padding 与 border —— 让 toolbar 的底分隔线成为唯一分割 */
  .pve-page-header {
    padding-bottom: 0;
    border-bottom: 0;
  }
  /* 关闭 sticky toolbar 的 fade-up：入场动画起点 translateY(10px) 会让
     吸顶位置短暂下移 10px，肉眼看到页头下方一道「假缝」。
     ≤768 段下方亦有重复声明，这里覆盖 769~860 段。 */
  .pve-page-toolbar.fade-up {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* 工具条容器：单行 sticky 毛玻璃 ============================ */
  .pve-page-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    /* 内部 tabs 自己横滚，工具条自身不能裁切（裁了就划不动） */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    /* 单行 sticky 吸顶（接力页头） */
    position: -webkit-sticky;
    position: sticky;
    top: var(--page-header-h, 92px);
    z-index: 12;
    /* narrow 已 padding-inline:0 全宽贴边，无需再外扩 */
    margin: 0;
    /* 紧靠顶部：上 padding 收到 6px 让接缝更紧凑；
       底部稍多 8px 给 tabs 视觉呼吸 */
    padding: 6px 12px 8px;
    /* 移动端覆盖 framed 修饰：去掉边框，改用底部分隔线 */
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    /* 阴影：仅向下投射，不向上溢出 —— 避免接缝处出现「假缝」 */
    box-shadow: 0 4px 10px -10px rgba(15, 23, 42, 0.16);
    /* 阻断横向手势：只在 tabs 上滑动 */
    overscroll-behavior-x: contain;
  }

  /* 行容器：左 pin + tabs 同行，占满工具条剩余宽度 ============ */
  .pve-page-toolbar-tabs-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    gap: 12px;
    box-sizing: border-box;
  }

  /* 钉左 pill：「全部」之类的固定 tab，横滑时不被滑过的 tab 覆盖 */
  .pve-page-toolbar-pin {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 auto;
    flex-shrink: 0;
    /* 与 toolbar 同色背景，遮住下层滑过的 tab */
    background: rgba(255, 255, 255, 0.92);
    /* 右侧渐隐：提示后面有更多内容可滑 */
    box-shadow: 8px 0 12px -10px rgba(15, 23, 42, 0.18);
    /* 阻断横向手势 */
    touch-action: pan-y;
  }

  /* 横滑 tabs 区：占满剩余宽度，隐藏滚动条，启用 scroll-snap */
  .pve-page-toolbar-tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* 仅允许横向滑动，纵向手势穿透到页面 */
    touch-action: pan-x;
    gap: 8px;
    margin: 0;
    padding: 2px 0;
  }
  .pve-page-toolbar-tabs::-webkit-scrollbar {
    display: none;
  }
  /* tabs 直接子项默认行为：不压缩、不换行、加 snap */
  .pve-page-toolbar-tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}


/* ============================================================
 * 通用：分页器吸底（PC + 平板 + 移动端统一）
 * 用法：给分页容器追加 .pve-pinned-pager 类，或调用 PVE.pinPager(target)。
 * 实现：相对最近的滚动祖先（通常是 main.overflow-auto）做 sticky bottom:0。
 * 双类名 (.pve-pinned-pager.pve-pinned-pager) 提升特异度到 0,2,0，
 * 用于覆盖各模块对 .workflow-pager / .agents-pager / .resource-pager
 * 等的 background:transparent / border:none 重置。
 * ============================================================ */
.pve-pinned-pager.pve-pinned-pager {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  margin-top: 16px;
  /* 抵消 .pve-page-narrow 的 padding-inline，让磨砂背景吃满窄列宽度。
     直接读全局 --pve-gutter-x token,与窄列 padding 完全同步,
     无需在每个断点重复定义。 */
  margin-inline: calc(-1 * var(--pve-gutter-x, 40px));
  padding: 10px var(--pve-gutter-x, 40px) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -8px 18px -16px rgba(15, 23, 42, 0.22);
  /* 让磨砂层独立合成，避免 sticky + filter 在某些内核上的闪烁 */
  isolation: isolate;
  /* 关闭 sticky 元素自身被 transform 干扰的可能（动画期间） */
  will-change: transform;
}
.pve-pinned-pager.pve-pinned-pager[hidden] {
  display: none !important;
}
/* 不支持 backdrop-filter 的浏览器（含老 Edge / 安卓 WebView 旧版）：纯白兜底 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pve-pinned-pager.pve-pinned-pager {
    background: #ffffff;
  }
}
/* 浮起态（pager 底缘紧贴滚动容器底缘 = 下方还有更多内容）：加重阴影提示 */
.pve-pinned-pager.pve-pinned-pager.is-pinned-floating {
  box-shadow: 0 -10px 22px -14px rgba(15, 23, 42, 0.28);
}
/* 触底态（已经滚到列表末尾 = pager 自然出现）：抹平阴影更安静 */
.pve-pinned-pager.pve-pinned-pager.is-pinned-resting {
  box-shadow: 0 -6px 14px -16px rgba(15, 23, 42, 0.12);
}
/* 平板：吸底分页器横向 padding / margin-inline 由全局 --pve-gutter-x 自动跟随,
   此处仅微调 padding 节奏(更紧凑),不再重复声明 margin-inline */
@media (min-width: 769px) and (max-width: 1024px) {
  .pve-pinned-pager.pve-pinned-pager {
    padding: 10px var(--pve-gutter-x, 24px) calc(10px + env(safe-area-inset-bottom));
  }
}
/* 移动端：narrow 已 padding-inline:0 全宽贴边,分页器无需再负外扩。
   margin-inline:0 + 自身 padding-inline:16px 提供分页按钮的呼吸感。 */
@media (max-width: 768px) {
  .pve-pinned-pager.pve-pinned-pager {
    margin: 12px 0 0;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    /* 极个别 iOS Safari 在 sticky + flex 父容器下会丢失贴底，强制最低优先级回退 */
    bottom: 0;
  }
}
@media (max-width: 380px) {
  .pve-pinned-pager.pve-pinned-pager {
    margin: 10px 0 0;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  }
}
/* 兜底：降低运动 / 关闭动效偏好下，去掉浮起阴影动画 */
@media (prefers-reduced-motion: reduce) {
  .pve-pinned-pager.pve-pinned-pager {
    transition: none;
    will-change: auto;
  }
}


/* ============================================================
 * 列表 / 卡片视图 公共骨架（pve-list-*, pve-create-*）
 * ----------------------------------------------------------
 * 适用于 workflow / knowledge(resources) / agents-list 等列表+卡片双视图页。
 * 模块仅声明列宽 (grid-template-columns) 与 brand accent (--pve-row-accent)，
 * 容器气孔、行卡片基础样式、创建入口视觉全部从这里继承。
 * ============================================================ */

.pve-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.pve-list-row {
  /* 列分配（grid-template-columns）由模块自行声明：
       - workflow：桌面 5 列 / 移动 3 列，icon 独占首列；
       - knowledge / agents：icon 嵌在 row-main 内（main 是复合交互单元，独立首列会破坏点击/焦点语义）。
     公共类只负责行卡片的外形（边框 / 圆角 / padding / hover / accent 竖条）。 */
  position: relative;
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.pve-list-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pve-row-accent, #cbd5e1);
  opacity: 0.5;
  transition: opacity 0.18s ease;
}
.pve-list-row:hover {
  border-color: #c7d2fe;
  box-shadow: 0 14px 28px -22px rgba(99, 102, 241, 0.32);
  transform: translateY(-1px);
}
.pve-list-row:hover::before {
  opacity: 1;
}

/* 创建入口（卡片视图）：紫色虚线 + 渐变底 + 浮起的 plus 块 */
.pve-create-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 172px;
  padding: 18px;
  border-radius: 16px;
  border: 1.5px dashed #cbd5e1;
  background: linear-gradient(180deg, #fafbff 0%, #f5f7ff 100%);
  color: #475569;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pve-create-card:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -28px rgba(99, 102, 241, 0.45);
  background: linear-gradient(180deg, #f5f7ff 0%, #eef2ff 100%);
  color: #475569;
}
.pve-create-card:active {
  transform: translateY(-1px) scale(0.992);
}
.pve-create-card-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  color: #6366f1;
  box-shadow: 0 6px 16px -10px rgba(99, 102, 241, 0.4),
              inset 0 0 0 1px rgba(99, 102, 241, 0.18);
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.pve-create-card:hover .pve-create-card-plus {
  background: #6366f1;
  color: #ffffff;
}
.pve-create-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pve-create-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}
.pve-create-card-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}

/* 创建入口（列表视图）：沿用 .pve-list-row 的 grid，外观虚线 + 紫色 plus */
.pve-create-row {
  border-style: dashed;
  border-width: 1.5px;
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #fafbff 0%, #f5f7ff 100%);
  cursor: pointer;
  text-align: left;
}
.pve-create-row::before {
  display: none;
}
.pve-create-row:hover {
  border-color: #6366f1;
  box-shadow: 0 18px 32px -28px rgba(99, 102, 241, 0.45);
  background: linear-gradient(180deg, #f5f7ff 0%, #eef2ff 100%);
}
.pve-create-row-plus {
  background: #ffffff !important;
  color: #6366f1 !important;
  box-shadow: 0 6px 16px -10px rgba(99, 102, 241, 0.4),
              inset 0 0 0 1px rgba(99, 102, 241, 0.18);
  transition: background 0.2s ease, color 0.2s ease;
}
.pve-create-row:hover .pve-create-row-plus {
  background: #6366f1 !important;
  color: #ffffff !important;
}

/* 移动端节奏统一：≤860 容器加 12px 气孔；行内边距收紧；创建卡改横向紧凑 */
@media (max-width: 860px) {
  .pve-list-container {
    padding-inline: 12px;
  }
  .pve-list-row {
    padding: 12px 14px;
    gap: 12px;
  }
  .pve-create-card {
    min-height: 0;
    padding: 14px 14px 12px;
    gap: 12px;
  }
  .pve-create-card-plus {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }
  .pve-create-card-title {
    font-size: 14.5px;
  }
  .pve-create-card-desc {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .pve-list-container {
    padding-inline: 10px;
  }
}

/* 创建入口（列表视图 · flex 形）：图标 + 标题描述 + 右侧 chevron。
   适用于数据行 grid 列宽与创建入口结构差异较大的场景（如 workflow：5 列 grid 行 vs 简单的「+ 标题 描述 >」入口）。 */
.pve-create-row-flex {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: linear-gradient(180deg, #fafbff 0%, #f5f7ff 100%);
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.pve-create-row-flex:hover {
  border-color: #6366f1;
  background: linear-gradient(180deg, #f5f7ff 0%, #eef2ff 100%);
  transform: translateY(-1px);
}
.pve-create-row-flex-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #ffffff;
  color: #6366f1;
  box-shadow: 0 4px 10px -8px rgba(99, 102, 241, 0.4),
              inset 0 0 0 1px rgba(99, 102, 241, 0.18);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.pve-create-row-flex:hover .pve-create-row-flex-plus {
  background: #6366f1;
  color: #ffffff;
}
.pve-create-row-flex-body {
  flex: 1;
  min-width: 0;
}
.pve-create-row-flex-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.pve-create-row-flex-desc {
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}
.pve-create-row-flex-chevron {
  color: #94a3b8;
  flex-shrink: 0;
}



/* ============================================================
 * 侧边栏 - 历史对话 折叠分组 (原 app.css L780-1087)
 * 由 assets/js/app.js 动态注入侧边栏 DOM 时使用，所有页都需要
 * ============================================================ */
/* ============================================================
 * 历史对话 折叠分组(PC 端导航项可上下收缩)
 * ============================================================ */
.sidebar-nav-history-group {
  position: relative;
}
.sidebar-nav-history-toggle {
  position: absolute;
  top: 7px;
  right: 6px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-nav-history-toggle:hover {
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
}
.sidebar-nav-history-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background 0.18s ease, color 0.18s ease;
}
.sidebar-nav-history-group.is-collapsed .sidebar-nav-history-count {
  background: rgba(99, 102, 241, 0.16);
  color: #4f46e5;
}
.sidebar-nav-history-toggle:hover .sidebar-nav-history-count {
  background: rgba(148, 163, 184, 0.28);
}
.sidebar-nav-history-toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.22s ease;
}
.sidebar-nav-history-group.is-collapsed .sidebar-nav-history-toggle-icon {
  transform: rotate(-90deg);
}
/* chevron+count 在右侧,隐藏冗余的「Chat」分类 meta */
.sidebar-nav-history-group > .sidebar-nav-item .sidebar-nav-meta {
  display: none;
}
/* 子项容器 收缩动画(max-height + opacity) */
.sidebar-nav-history-group .sidebar-nav-children {
  overflow: hidden;
  max-height: 1200px;
  transition: max-height 0.28s ease, opacity 0.2s ease,
              margin-top 0.2s ease, margin-bottom 0.2s ease;
}
.sidebar-nav-history-group.is-collapsed .sidebar-nav-children {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}
/* 侧栏整体折叠时,隐藏 chevron 按钮(图标栏不需要二级展开) */
.pve-sidebar-shell.collapsed .sidebar-nav-history-toggle {
  display: none;
}
/* 移动抽屉里也不显示 chevron(交互入口太挤),让历史对话默认展开 */
@media (max-width: 768px) {
  .sidebar-nav-history-toggle {
    display: none;
  }
  .sidebar-nav-history-group.is-collapsed .sidebar-nav-children {
    max-height: 1200px;
    opacity: 1;
    margin-top: 2px;
    margin-bottom: 4px;
    pointer-events: auto;
  }
}

.sidebar-hint-card-soft {
  background: rgba(255, 255, 255, 0.38);
  border-style: dashed;
}

.sidebar-hint-title {
  padding: 0 2px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #9ca3af;
}

.sidebar-hint-link {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: #111827;
}

.sidebar-hint-link:hover {
  background: rgba(226, 232, 240, 0.72);
}

.sidebar-block-team {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(203, 213, 225, 0.5);
}

.sidebar-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 14px;
}

.sidebar-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-content: space-between;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-section-toggle:hover {
  color: #64748b;
}

.sidebar-section-toggle-label {
  display: inline-flex;
  align-items: center;
}

.sidebar-section-toggle-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.sidebar-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background 0.18s ease, color 0.18s ease;
}

.sidebar-block-team.is-collapsed .sidebar-section-count {
  background: rgba(99, 102, 241, 0.16);
  color: #4f46e5;
}

.sidebar-section-toggle-icon {
  width: 16px;
  height: 16px;
  color: #94a3b8;
  stroke-width: 2.4;
  transition: transform 0.22s ease, color 0.18s ease;
}

.sidebar-section-toggle:hover .sidebar-section-toggle-icon {
  color: #475569;
}

.sidebar-block-team.is-collapsed .sidebar-section-toggle-icon {
  transform: rotate(-90deg);
}

.sidebar-block-team .sidebar-team-body {
  overflow: hidden;
  max-height: 1600px;
  transition: max-height 0.28s ease, opacity 0.2s ease, margin 0.2s ease;
}

.sidebar-block-team.is-collapsed .sidebar-team-body {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* 侧栏整体折叠(图标栏)时,隐藏团队 chevron */
.pve-sidebar-shell.collapsed .sidebar-section-toggle-icon {
  display: none;
}

.sidebar-section-action {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.sidebar-section-action:hover {
  background: rgba(226, 232, 240, 0.9);
  color: #475569;
}

.sidebar-team-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
}

.sidebar-team-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: transparent;
  color: #1f2937;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sidebar-team-item:hover {
  background: rgba(226, 232, 240, 0.7);
}

.sidebar-team-item.is-active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.85));
  box-shadow: 0 6px 16px -14px rgba(15, 23, 42, 0.28), inset 0 0 0 1px rgba(203, 213, 225, 0.6);
}

.sidebar-team-item.is-active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--team-accent, #ef4444);
}

.sidebar-team-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--team-accent, #ef4444);
  background: color-mix(in srgb, var(--team-accent, #ef4444) 14%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--team-accent, #ef4444) 24%, white);
}

.sidebar-team-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}


/* ============================================================
 * 侧边栏 - 团队方向 创建/加入 + 移动端下拉 + sidebar footer
 *  原 app.css L1088-1334 + L1335-1901
 * 同上, 由 JS 注入侧边栏时使用，所有页都需要
 * ============================================================ */

/* === 始终可见的「创建或加入」入口 === */
.sidebar-team-add {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 12px);
  margin: 6px 6px 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  background: transparent;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-team-add:hover {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.45);
  color: #4f46e5;
}

.sidebar-team-add:active {
  transform: translateY(1px);
}

.sidebar-team-add-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.16);
  color: #64748b;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease;
}

.sidebar-team-add:hover .sidebar-team-add-icon {
  background: rgba(99, 102, 241, 0.16);
  color: #4f46e5;
}

.sidebar-team-add-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 折叠状态下：列表收起后,加号行仍紧贴在标题下方,顶部 margin 调小 */
.sidebar-block-team.is-collapsed .sidebar-team-add {
  margin-top: 0;
}

/* 没有团队时的内联空态(在 body 内部) */
.sidebar-team-empty-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 6px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(241, 245, 249, 0.6);
  color: #94a3b8;
  font-size: 12px;
}

.sidebar-team-empty-inline i {
  color: #cbd5e1;
  flex-shrink: 0;
}

/* 侧栏图标化时隐藏加号行文本,只保留小图标块 */
.pve-sidebar-shell.collapsed .sidebar-team-add-text {
  display: none;
}

.pve-sidebar-shell.collapsed .sidebar-team-add {
  width: auto;
  justify-content: center;
  padding: 6px;
}

.sidebar-team-name {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.sidebar-team-meta {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.sidebar-team-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #64748b;
}

.sidebar-team-stat-ico {
  width: 11px;
  height: 11px;
  color: #cbd5e1;
  stroke-width: 2;
  flex-shrink: 0;
}

.sidebar-team-stat-sep {
  width: 1px;
  height: 8px;
  background: rgba(148, 163, 184, 0.4);
  display: inline-block;
}

.sidebar-team-item:hover .sidebar-team-stat-ico,
.sidebar-team-item.is-active .sidebar-team-stat-ico {
  color: var(--team-accent, #94a3b8);
}

.sidebar-team-item.is-active .sidebar-team-stat {
  color: #334155;
}

.sidebar-team-pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--team-accent, #ef4444);
  flex-shrink: 0;
  animation: sidebarTeamPulse 2.2s ease-out infinite;
}

@keyframes sidebarTeamPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--team-accent, #ef4444) 55%, transparent); }
  70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--team-accent, #ef4444) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--team-accent, #ef4444) 0%, transparent); }
}

.sidebar-team-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 108px;
  padding: 16px 12px;
  border-radius: 14px;
  border: 1px dashed #d1d5db;
  background: rgba(255, 255, 255, 0.22);
  color: #94a3b8;
  font-size: 12.5px;
}

.sidebar-team-empty-compact {
  flex-direction: row;
  min-height: 0;
  gap: 10px;
  margin: 10px 6px 0;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(203, 213, 225, 0.85);
}

.sidebar-team-empty-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: #94a3b8;
  flex-shrink: 0;
}

.sidebar-team-empty-compact .sidebar-team-empty-icon {
  width: 24px;
  height: 24px;
}

.sidebar-team-empty-text {
  line-height: 1.2;
}

.sidebar-team-empty-compact .sidebar-team-empty-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #64748b;
}

.sidebar-team-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e5e7eb;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sidebar-team-empty-cta:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #1f2937;
}

.sidebar-team-empty-compact .sidebar-team-empty-cta {
  padding: 4px 8px;
  font-size: 11.5px;
  flex-shrink: 0;
}

.sidebar-team-empty i {
  color: inherit;
}


/* === 团队方向 - 移动端下拉触发器 + 选择列表（桌面默认隐藏，仅在 ≤768px 显示） === */
.sidebar-team-mobile {
  display: none;
}
.sidebar-footer {
  position: relative;
  padding: 14px 10px 12px;
  border-top: 1px solid rgba(203, 213, 225, 0.5);
  background: rgba(255, 255, 255, 0.18);
}

.sidebar-profile-wrap {
  position: relative;
  margin-top: 10px;
}

.sidebar-footer-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #111827;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.sidebar-footer-link:hover {
  background: rgba(15, 23, 42, 0.045);
}

.sidebar-footer-link.nav-active {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
}

.sidebar-footer-link.nav-active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3b82f6, #6366f1);
}

.sidebar-footer-link.nav-active .sidebar-nav-icon-wrap {
  color: #1d4ed8;
}

.sidebar-footer-link .sidebar-nav-icon-wrap {
  color: inherit;
}

.sidebar-footer-link-copy {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
}

.sidebar-footer-link.nav-active .sidebar-footer-link-copy {
  font-weight: 700;
}

.sidebar-profile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #111827;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease;
}

.sidebar-profile:hover {
  background: rgba(15, 23, 42, 0.045);
}

.sidebar-profile-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f7c68d, #fff3e4);
  color: #9a5b1f;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 18px -14px rgba(180, 120, 45, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.sidebar-profile-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

.sidebar-profile-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.14);
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.sidebar-profile-caret {
  color: #94a3b8;
  flex-shrink: 0;
}

.dropdown-menu.sidebar-account-menu {
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 238px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px -26px rgba(15, 23, 42, 0.42), 0 10px 24px -20px rgba(15, 23, 42, 0.32);
  overflow: hidden;
  z-index: var(--z-sidebar-popover);
}

.sidebar-account-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 11px;
}

.sidebar-account-summary-avatar {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f7c68d, #fff3e4);
  color: #9a5b1f;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 18px -14px rgba(180, 120, 45, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.76);
}

.sidebar-account-summary-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-account-summary-name {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-account-summary-subtitle {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.2;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-account-menu-section {
  padding: 8px;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.sidebar-account-menu-section-logout {
  padding-top: 9px;
}

/* 团队操作分组：仅移动端在个人菜单内显示，桌面端使用侧栏团队方向区域 */
.sidebar-account-menu-section-team {
  display: none;
}
@media (max-width: 768px) {
  .sidebar-account-menu-section-team {
    display: block;
  }
  /* "我的团队" 分组标题 - 作为可点击的折叠触发器 */
  .sidebar-account-menu .sidebar-account-menu-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
  }
  .sidebar-account-menu .sidebar-account-menu-section-title > * {
    pointer-events: none;
  }
  .sidebar-account-menu .sidebar-account-menu-section-title:hover,
  .sidebar-account-menu .sidebar-account-menu-section-title:active {
    background: #f1f5f9;
    color: #64748b;
  }
  .sidebar-account-menu .sidebar-account-menu-section-title-label {
    flex: 1;
    min-width: 0;
  }
  .sidebar-account-menu .sidebar-account-menu-section-title-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
  }
  .sidebar-account-menu .sidebar-account-menu-section-count {
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar-account-menu .sidebar-account-menu-section-toggle-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.18s ease;
  }
  .sidebar-account-menu-section-team.is-collapsed
    .sidebar-account-menu-section-toggle-icon {
    transform: rotate(-90deg);
  }
  /* 折叠时隐藏列表与操作按钮 */
  .sidebar-account-menu .sidebar-account-menu-section-team-body {
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .sidebar-account-menu-section-team.is-collapsed
    .sidebar-account-menu-section-team-body {
    display: none;
  }
  /* 团队列表:与下方按钮统一行高/字号,仅前缀色点暗示团队色 */
  .sidebar-account-menu .sidebar-account-menu-team-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0 0 4px;
  }
  .sidebar-account-menu .sidebar-account-menu-team-item {
    --team-accent: #6366f1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .sidebar-account-menu .sidebar-account-menu-team-item > * {
    pointer-events: none;
  }
  .sidebar-account-menu .sidebar-account-menu-team-item:active,
  .sidebar-account-menu .sidebar-account-menu-team-item:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
  .sidebar-account-menu .sidebar-account-menu-team-item.is-active {
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
  }
  .sidebar-account-menu .sidebar-account-menu-team-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--team-accent);
    flex-shrink: 0;
  }
  .sidebar-account-menu .sidebar-account-menu-team-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-account-menu .sidebar-account-menu-team-check {
    width: 14px;
    height: 14px;
    color: #1d4ed8;
    flex-shrink: 0;
  }
  .sidebar-account-menu .sidebar-account-menu-team-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    font-size: 12.5px;
    color: #94a3b8;
  }
  /* 团队列表搬到个人菜单后,侧栏底部原"团队方向"触发器隐藏,避免重复入口 */
  #pve-sidebar .sidebar-team-mobile {
    display: none !important;
  }
}

.sidebar-account-menu .sidebar-account-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #111827;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.sidebar-account-menu .sidebar-account-menu-item:hover {
  background: #f8fafc;
}

.sidebar-account-menu .sidebar-account-menu-item-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  flex-shrink: 0;
}

.sidebar-account-menu .sidebar-account-menu-item-label {
  flex: 1;
  min-width: 0;
}

.sidebar-account-menu .sidebar-account-menu-item-logout {
  font-weight: 500;
}

.pve-sidebar-shell.collapsed {
  width: 48px;
  border-right-color: #edf1f5;
  background: linear-gradient(180deg, #f8f9fc 0%, #f4f6fa 100%);
}

.pve-sidebar-shell.collapsed .sidebar-brand-shell {
  justify-content: center;
  padding: 10px 0 14px;
  border-bottom: none;
}

.pve-sidebar-shell.collapsed .sidebar-brand {
  display: none;
}

.pve-sidebar-shell.collapsed .sidebar-brand-toggle {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  opacity: 1;
  padding: 0;
}

.pve-sidebar-shell.collapsed .sidebar-brand-toggle .sidebar-brand-mark {
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}

.pve-sidebar-shell.collapsed .sidebar-brand-toggle:hover {
  background: transparent;
  opacity: 1;
}

.pve-sidebar-shell.collapsed .sidebar-brand-toggle:hover .sidebar-brand-mark {
  transform: scale(1.06);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.5);
}

.pve-sidebar-shell.collapsed .sidebar-brand-copy,
.pve-sidebar-shell.collapsed .sidebar-new-chat span,
.pve-sidebar-shell.collapsed .sidebar-block > .sidebar-section-title,
.pve-sidebar-shell.collapsed .sidebar-nav-copy,
.pve-sidebar-shell.collapsed .sidebar-hint-card,
.pve-sidebar-shell.collapsed .sidebar-block-team,
.pve-sidebar-shell.collapsed .sidebar-footer-link-copy,
.pve-sidebar-shell.collapsed .sidebar-profile-copy,
.pve-sidebar-shell.collapsed .sidebar-profile-caret {
  display: none;
}

.pve-sidebar-shell.collapsed .pve-sidebar-scroll {
  padding: 2px 0 18px;
}

.pve-sidebar-shell.collapsed .sidebar-top-action {
  display: flex;
  justify-content: center;
  padding-bottom: 14px;
}

.pve-sidebar-shell.collapsed .sidebar-block {
  margin-top: 0;
}

.pve-sidebar-shell.collapsed .sidebar-nav-list {
  align-items: stretch;
  gap: 6px;
}

.pve-sidebar-shell.collapsed .sidebar-new-chat {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  box-shadow: 0 4px 10px -6px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pve-sidebar-shell.collapsed .sidebar-new-chat i {
  width: 14px;
  height: 14px;
}

.pve-sidebar-shell.collapsed .sidebar-new-chat:hover {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  border-color: transparent;
  box-shadow: 0 8px 16px -8px rgba(59, 130, 246, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* 侧栏收起态:用"话"字替换 + 图标,沿用展开态主按钮配色 */
.pve-sidebar-shell.collapsed .sidebar-new-chat > i {
  display: none;
}
.pve-sidebar-shell.collapsed .sidebar-new-chat span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0;
  line-height: 1;
}
.pve-sidebar-shell.collapsed .sidebar-new-chat span::before {
  content: '话';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
}

.pve-sidebar-shell.collapsed .sidebar-nav-item,
.pve-sidebar-shell.collapsed .sidebar-footer-link,
.pve-sidebar-shell.collapsed .sidebar-profile {
  width: 34px;
  height: 34px;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border-radius: 10px;
  opacity: 0.86;
}

.pve-sidebar-shell.collapsed .sidebar-nav-item.nav-active,
.pve-sidebar-shell.collapsed .sidebar-footer-link.nav-active {
  background: rgba(59, 130, 246, 0.12);
  box-shadow: none;
  opacity: 1;
}

.pve-sidebar-shell.collapsed .sidebar-nav-item.nav-active::before,
.pve-sidebar-shell.collapsed .sidebar-footer-link.nav-active::before {
  display: none;
}

.pve-sidebar-shell.collapsed .sidebar-nav-item.nav-active .sidebar-nav-icon-wrap,
.pve-sidebar-shell.collapsed .sidebar-footer-link.nav-active .sidebar-nav-icon-wrap {
  color: #1d4ed8;
}

.pve-sidebar-shell.collapsed .sidebar-nav-item:hover,
.pve-sidebar-shell.collapsed .sidebar-footer-link:hover,
.pve-sidebar-shell.collapsed .sidebar-profile:hover {
  background: rgba(15, 23, 42, 0.045);
  opacity: 1;
}

.pve-sidebar-shell.collapsed .sidebar-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0 14px;
  border-top-color: rgba(226, 232, 240, 0.88);
  background: transparent;
}

.pve-sidebar-shell.collapsed .sidebar-profile {
  margin-top: 0;
}

.pve-sidebar-shell.collapsed .dropdown-menu.sidebar-account-menu {
  left: calc(100% + 10px);
  right: auto;
  bottom: 0;
  width: 238px;
}

.pve-sidebar-shell.collapsed .sidebar-profile-avatar {
  width: 18px;
  height: 18px;
  font-size: 10px;
  box-shadow: none;
}

.pve-sidebar-shell.collapsed .sidebar-nav-icon-wrap,
.pve-sidebar-shell.collapsed .sidebar-footer-link .sidebar-nav-icon-wrap {
  width: 13px;
  height: 13px;
  color: #475569;
}

.pve-sidebar-shell.collapsed .sidebar-nav-icon {
  width: 13px;
  height: 13px;
}


/* ============================================================
 * 公共小组件 (proj-dot / stage-step / line-clamp / float-slow / hero-gradient / tab-underline / previewer / chat-input-card / tooltip / dropdown)
 * 原 app.css L3009-L3157, 拆分时被误带入 login.css，现归位到 components.css
 * 这些类被多个业务页 / sidebar 下拉菜单使用，必须放公共
 * ============================================================ */
/* 项目侧栏小色点 */
.proj-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* 阶段色徽章(项目工作台头部) */
.stage-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-muted);
}
.stage-step.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}
.stage-step.done {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--stage-s9);
}

/* utility: 文本截断多行 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 头部 watermark 漂移 */
.float-slow {
  animation: floatSlow 14s ease-in-out infinite;
}
@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(8px, -10px) rotate(6deg); }
}

/* hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(99, 102, 241, 0.06) 50%, rgba(168, 85, 247, 0.04) 100%);
}
.hero-gradient-personal {
  background: linear-gradient(135deg, rgba(124, 92, 252, 0.08) 0%, rgba(183, 148, 244, 0.06) 50%, rgba(168, 85, 247, 0.04) 100%);
}

/* tab 下划线指示 */
.tab-underline {
  position: relative;
}
.tab-underline.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
}

/* 通用产物预览右栏 (挤压式) */
.previewer {
  flex: 0 0 0;
  width: 0;
  overflow: hidden;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 1px solid var(--color-border);
  background: white;
}
.previewer.open {
  width: 480px;
}

/* 输入栏圆角白卡 */
.chat-input-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.1);
}

/* tooltip 简易 */
.has-tooltip { position: relative; }
.has-tooltip:hover .tooltip-content {
  opacity: 1;
  transform: translate(-50%, -4px);
}
.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  background: #0f172a;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.18s ease;
  z-index: var(--z-dropdown);
}

/* dropdown 简易 */
.dropdown-menu {
  position: absolute;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.15);
  padding: 4px;
  min-width: 160px;
  z-index: var(--z-dropdown);
  display: none;
}
.dropdown-menu.open { display: block; }
.dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--color-fg);
  border-radius: 4px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}
.dropdown-menu button:hover { background: var(--color-muted-bg); }
.dropdown-menu button.danger { color: var(--color-destructive); }