/* ==========================================================================
   薯灵感 · 页面内容增强（page-polish）v1
   2026-10-05 建立
   目的：给「内容偏空」的页面补上「能力引导 / 示例入口 / 结果预览 / 更好的空态」，
        让页面第一次打开就有内容可读，而不是一片空白或一句「加载中…」。
   原则：
     1) 纯新增，类名统一 pp- 前缀，不修改任何既有选择器；
     2) 颜色 / 间距 / 圆角全部走既有变量（--card --line --ink1/2/3 --red --red-light --s-*）；
     3) 动效只用 transform / opacity，并尊重 prefers-reduced-motion；
     4) 加载位置：放在所有业务样式之后（index.html 末尾 <link>）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   一、能力引导条（.pp-guide / .pp-gitem）
   用在页面标题下方，用 3~4 个要点说明「这页能干嘛、注意什么」
   -------------------------------------------------------------------------- */
.pp-guide {
  border: 1px solid var(--line, #F2EDEE);
  background: var(--card, #fff);
  border-radius: var(--s-16, 16px);
  padding: var(--s-16, 16px) var(--s-18, 18px);
  margin-bottom: var(--s-16, 16px);
}
.pp-guide-head {
  display: flex;
  align-items: center;
  gap: var(--s-8, 8px);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ink1, #1F1B1D);
  margin-bottom: var(--s-12, 12px);
}
.pp-guide-head i[data-icon],
.pp-guide-head .icon { color: var(--xhs-red-text, #D81B37); }

.pp-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-10, 10px);
}
.pp-gitem {
  display: flex;
  align-items: flex-start;
  gap: var(--s-10, 10px);
  padding: var(--s-10, 10px) var(--s-12, 12px);
  border: 1px solid var(--line, #F2EDEE);
  border-radius: var(--s-12, 12px);
  background: var(--bg, #FBF9FA);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1),
              border-color .22s cubic-bezier(.16,1,.3,1),
              background .22s cubic-bezier(.16,1,.3,1);
}
.pp-gitem:hover {
  transform: translateY(-2px);
  border-color: var(--red, #FF2442);
  background: var(--red-light, #FFF5F6);
}
.pp-gitem i[data-icon],
.pp-gitem .icon {
  flex: none;
  width: var(--icon-size-md, 20px);
  height: var(--icon-size-md, 20px);
  color: var(--xhs-red-text, #D81B37);
  margin-top: 1px;
}
.pp-gitem b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink1, #1F1B1D);
  margin-bottom: 2px;
}
.pp-gitem span {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink3, #6E6869);
}

/* --------------------------------------------------------------------------
   二、示例 / 快捷填入 chips（.pp-ex / .pp-chip）
   空输入框旁边给几个可直接点的示例，降低「不知道填什么」的门槛
   -------------------------------------------------------------------------- */
.pp-ex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8, 8px);
  margin-top: var(--s-10, 10px);
}
.pp-ex-label {
  font-size: 12px;
  color: var(--ink3, #6E6869);
  margin-right: 2px;
}
.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink2, #5B5457);
  background: var(--card, #fff);
  border: 1px solid var(--line, #F2EDEE);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1),
              color .2s cubic-bezier(.16,1,.3,1),
              border-color .2s cubic-bezier(.16,1,.3,1),
              background .2s cubic-bezier(.16,1,.3,1);
}
.pp-chip:hover {
  color: var(--xhs-red-text, #D81B37);
  border-color: var(--red, #FF2442);
  background: var(--red-light, #FFF5F6);
  transform: translateY(-1px);
}
.pp-chip:active { transform: scale(.95); }

/* --------------------------------------------------------------------------
   三、结果预览占位（.pp-pre）
   生成类页面在「还没跑」时，把产出结构先摊开给用户看
   -------------------------------------------------------------------------- */
/* 工坊的结果区默认是 display:none（.sw-result 未加 .show 时不显示）。
   但里面放了「跑完之后会出现什么」的预览占位，未跑时正是最需要它的时候 ——
   带 .pp-pre-box 的结果区在未出结果时也保持可见，出了结果照常被覆盖。 */
#page-workshop .sw-result.pp-pre-box:not(.show) { display: block; }

.pp-pre {
  border: 1px dashed var(--line, #F2EDEE);
  border-radius: var(--s-12, 12px);
  background: var(--bg, #FBF9FA);
  padding: var(--s-16, 16px) var(--s-18, 18px);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink3, #6E6869);
}
.pp-pre b { color: var(--ink2, #5B5457); font-weight: 700; }
.pp-pre ol { margin: 4px 0 0 18px; padding: 0; }
.pp-pre li { margin-bottom: 2px; }
.pp-pre-title {
  display: flex;
  align-items: center;
  gap: var(--s-8, 8px);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink1, #1F1B1D);
  margin-bottom: var(--s-6, 6px);
}
.pp-pre-title i[data-icon],
.pp-pre-title .icon { color: var(--xhs-red-text, #D81B37); }

/* --------------------------------------------------------------------------
   四、增强空态（.pp-empty / .pp-etip）
   比原来的纯文字空态多：图标圈 + 标题 + 说明 + 行动按钮 + 「可以先这样做」建议卡
   -------------------------------------------------------------------------- */
.pp-empty {
  text-align: center;
  padding: var(--s-40, 40px) var(--s-20, 20px);
  border: 1px dashed var(--line, #F2EDEE);
  border-radius: var(--s-16, 16px);
  background: var(--card, #fff);
}
.pp-empty-art {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--s-14, 14px);
  border-radius: 50%;
  background: var(--red-light, #FFF5F6);
  color: var(--xhs-red-text, #D81B37);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-empty-art i[data-icon],
.pp-empty-art .icon {
  width: var(--icon-size-lg, 24px);
  height: var(--icon-size-lg, 24px);
  color: var(--xhs-red-text, #D81B37);
}
.pp-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink1, #1F1B1D);
  margin-bottom: var(--s-6, 6px);
}
.pp-empty-desc {
  max-width: 520px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink3, #6E6869);
}
.pp-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-10, 10px);
  margin-top: var(--s-18, 18px);
}
.pp-empty-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-10, 10px);
  margin-top: var(--s-24, 24px);
  text-align: left;
}
.pp-etip {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8, 8px);
  padding: var(--s-12, 12px);
  border: 1px solid var(--line, #F2EDEE);
  border-radius: var(--s-12, 12px);
  background: var(--bg, #FBF9FA);
}
.pp-etip i[data-icon],
.pp-etip .icon {
  flex: none;
  width: var(--icon-size-sm, 16px);
  height: var(--icon-size-sm, 16px);
  color: var(--xhs-red-text, #D81B37);
  margin-top: 2px;
}
.pp-etip b { display: block; font-size: 12.5px; color: var(--ink1, #1F1B1D); }
.pp-etip span { display: block; font-size: 12px; line-height: 1.6; color: var(--ink3, #6E6869); margin-top: 2px; }

/* --------------------------------------------------------------------------
   五、角色权限速查表（团队协作页）
   -------------------------------------------------------------------------- */
.pp-role {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.pp-role th,
.pp-role td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, #F2EDEE);
  color: var(--ink2, #5B5457);
}
.pp-role th { color: var(--ink3, #6E6869); font-weight: 600; font-size: 12px; }
.pp-role tr:last-child td { border-bottom: none; }
.pp-role td:first-child { font-weight: 700; color: var(--ink1, #1F1B1D); }
.pp-yes { color: var(--success-text, #137A52); font-weight: 700; }
.pp-no  { color: var(--ink3, #6E6869); }

/* --------------------------------------------------------------------------
   六、移动端与无障碍
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pp-guide { padding: var(--s-12, 12px) var(--s-14, 14px); }
  .pp-guide-grid { grid-template-columns: 1fr; }
  .pp-empty { padding: var(--s-24, 24px) var(--s-14, 14px); }
  .pp-empty-tips { grid-template-columns: 1fr; }
  .pp-empty-actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-gitem, .pp-chip { transition: none !important; }
  .pp-gitem:hover { transform: none; }
  .pp-chip:hover, .pp-chip:active { transform: none; }
}

/* --------------------------------------------------------------------------
   七、返回顶部按钮避让薯薯挂件（2026-10-05，同日二改：用户反馈再往上挪）
   薯薯 stage 固定在右下角（right 8 / bottom 8，桌面 116px、移动 68px）。
   第一版 +22px 时按钮悬在挂件头顶旁，用户仍觉得挤；挂件放大形态实际高约 200px，
   固定基准拉到 +100px，无论 --ss-avatar 是默认 116px 还是放大后的实际高度，
   按钮都在立绘上方留足空隙。
   -------------------------------------------------------------------------- */
/* 2026-10-06 三改：按挂件真实尺寸避让（--ss-widget-w/h 由 ai-assistant.js 实测写入）。
 * 二版的 +100px 是按 --ss-avatar=116px 估的，动漫立绘实际 168x240（还要乘缩放），
 * 按钮正好悬在立绘胸口、和主动气泡挤成一团（用户截图反馈）。
 * 现在水平方向让开挂件宽度（立绘左侧 30px），垂直方向大致对齐立绘中部：
 *   立绘 168x240 → right 198 / bottom 144；简约 116x116 → right 146 / bottom 82。 */
#backTopBtn {
  right: calc(var(--ss-widget-w, 116px) + 30px);
  bottom: calc(var(--ss-widget-h, 116px) / 2 + 24px);
  z-index: calc(var(--z-companion, 9000) + 10); /* 薯薯 stage = 9000，主动气泡 = 9050 */
}
@media (max-width: 720px) {
  /* 窄屏立绘宽 168 占屏近半，让宽会把按钮推到屏幕中左 —— 改为悬在挂件上方 */
  #backTopBtn { right: 14px; bottom: calc(var(--ss-widget-h, 68px) + 44px); }
}

/* --------------------------------------------------------------------------
   八、输入框禁止手动拉伸（2026-10-05）
   右下角的 resize 手柄既破坏版式，也是「文字竖排」那类布局事故的常见诱因
   （被拉到极窄后 CJK 逐字换行）。所有 textarea 统一禁用手动调节，
   高度一律由内容与样式自己决定。
   -------------------------------------------------------------------------- */
/* 部分编辑器（#page-lab .plog-textarea 等）带 id+class 高优先级的 resize:vertical，
   这里用 !important 统一压平 —— 手柄一律不出现。 */
textarea { resize: none !important; }

/* --------------------------------------------------------------------------
   九、数据与设置等工作台页的「闪一下」（2026-10-05）
   成因有两个，都属于观感问题而不是数据问题：
   a) 进页动画 pageIn 是 16px 下坠 + 缩放，叠加内容从「加载中…」瞬间
      变成整块表格，视觉上就是「跳一下」；
   b) 切换页签（数据产品 → 能力认证…）时 consoleBody 整体 innerHTML
      一次性替换，没有过渡，浏览器一帧内整块重绘。
   处理：动画幅度减半去掉缩放；内容替换改为 0.28s 柔和淡入。
   -------------------------------------------------------------------------- */
.page.active { animation: ppPageIn .32s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)); }
@keyframes ppPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

#consoleBody > *,
#inboxBody > *,
#growthBody > *,
#teamBody > * {
  animation: fadeUp .28s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)) backwards;
}
/* 头两条略带阶梯，其余同步，避免长表格逐条蹦 */
#consoleBody > *:nth-child(2), #inboxBody > *:nth-child(2),
#growthBody > *:nth-child(2), #teamBody > *:nth-child(2) { animation-delay: .04s; }

@media (prefers-reduced-motion: reduce) {
  .page.active, #consoleBody > *, #inboxBody > *, #growthBody > *, #teamBody > * { animation: none !important; }
}