/* ============================================================
 * 薯薯 · 智能体视图样式
 * 小红书风格：主色 #FF2442，圆润、清爽、有温度
 * 动效只用 transform / opacity；尊重 prefers-reduced-motion
 * ============================================================ */

/* ---------- 覆盖层（面板内） ---------- */
.ss-ag {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 30;
  background: #fff; display: flex; flex-direction: column;
  opacity: 0; transform: translateX(12px); pointer-events: none;
  transition: opacity .22s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1);
}
.ss-ag[data-open="1"] { opacity: 1; transform: translateX(0); pointer-events: auto; }

.ss-ag-head {
  display: flex; align-items: center; gap: var(--s-8); padding: var(--s-10) var(--s-12);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.ss-ag-tabs { display: flex; gap: var(--s-4); flex: 1; overflow-x: auto; scrollbar-width: none; }
.ss-ag-tabs::-webkit-scrollbar { display: none; }
.ss-ag-tab {
  flex: 0 0 auto; font-size: 13px; padding: var(--s-6) var(--s-12); border-radius: 999px; cursor: pointer;
  color: #6b6f76; background: rgba(0, 0, 0, .04); border: none;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), background .16s ease, color .16s ease;
}
.ss-ag-tab:active { transform: scale(.94); }
.ss-ag-tab[data-on="1"] {
  color: #fff; background: linear-gradient(135deg, #FF7A8E, #E02039);
  box-shadow: var(--shadow-red);
}
.ss-ag-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  color: #6b6f76; background: rgba(0, 0, 0, .04); display: grid; place-items: center;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
.ss-ag-close svg { width: 15px; height: 15px; }
.ss-ag-close:active { transform: scale(.9); }

.ss-ag-body { flex: 1; overflow-y: auto; padding: var(--s-12); -webkit-overflow-scrolling: touch; }

.ss-ag-load, .ss-ag-empty {
  padding: var(--s-24) var(--s-12); text-align: center; color: #6E6869; font-size: 13px;
}
.ss-ag-tip { font-size: 12px; color: #6E6869; line-height: 1.6; margin: var(--s-6) 0 var(--s-10); }
.ss-ag-lab { font-size: 12px; color: #6b6f76; margin: var(--s-12) 0 var(--s-6); }

/* ---------- 通用块 ---------- */
.ss-ag-sec {
  background: #FAFAFB; border-radius: 14px; padding: var(--s-12); margin-bottom: var(--s-12);
}
.ss-ag-row { display: flex; gap: var(--s-8); align-items: center; flex-wrap: wrap; }
.ss-ag-input {
  flex: 1; min-width: 160px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px;
  padding: var(--s-8) var(--s-10); font-size: 13px; font-family: inherit; resize: none; outline: none;
  transition: border-color .16s ease;
}
.ss-ag-input:focus { border-color: var(--xhs-red-text, #D81B37); }
.ss-ag-btn {
  border: none; border-radius: 12px; padding: var(--s-8) var(--s-16); font-size: 13px; cursor: pointer;
  color: #6b6f76; background: rgba(0, 0, 0, .05);
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), opacity .16s ease;
}
.ss-ag-btn:active { transform: scale(.95); }
.ss-ag-btn.main {
  color: #fff; background: linear-gradient(135deg, #FF7A8E, #E02039);
  box-shadow: var(--shadow-red);
}
.ss-ag-btn.ghost { color: #6b6f76; background: rgba(0, 0, 0, .05); }
.ss-ag-btn[disabled] { opacity: .55; cursor: default; }

.ss-ag-sel {
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: var(--s-6) var(--s-8);
  font-size: 12px; background: #fff; color: #333;
}

/* ---------- 任务计划卡 ---------- */
.ss-ag-card {
  border: 1px solid rgba(0, 0, 0, .07); border-radius: 16px; padding: var(--s-12);
  box-shadow: var(--shadow-xs);
}
.ss-ag-card-h { display: flex; gap: var(--s-8); align-items: center; font-size: 14px; }
.ss-ag-card-h b { flex: 1; line-height: 1.45; }
.ss-ag-bar {
  height: 5px; border-radius: 999px; background: rgba(0, 0, 0, .06);
  overflow: hidden; margin: var(--s-10) 0 var(--s-6);
}
.ss-ag-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #FF7A8E, #FF2442);
  transition: width .35s cubic-bezier(.2, .8, .2, 1);
}
.ss-ag-meta { font-size: 12px; color: #6E6869; }

.ss-ag-steps { list-style: none; margin: var(--s-10) 0; padding: 0; }
.ss-ag-step { display: flex; gap: var(--s-10); padding: var(--s-8) 0; border-top: 1px dashed rgba(0, 0, 0, .07); }
.ss-ag-step:first-child { border-top: none; }
.ss-ag-seq {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; color: #fff; background: #c9ccd1; flex: 0 0 auto;
}
.ss-ag-step[data-st="done"] .ss-ag-seq { background: #22c55e; }
.ss-ag-step[data-st="running"] .ss-ag-seq { background: #FF2442; }
.ss-ag-step[data-st="failed"] .ss-ag-seq { background: #ef4444; }
.ss-ag-step[data-st="skipped"] { opacity: .45; }
.ss-ag-step[data-st="blocked"] .ss-ag-seq { background: #f59e0b; }
.ss-ag-step-r { flex: 1; min-width: 0; }
.ss-ag-step-t { font-size: 13px; color: #222; line-height: 1.45; }
.ss-ag-step-d { font-size: 12px; color: #6E6869; margin-top: 2px; line-height: 1.5; }
.ss-ag-step-m { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); }
.ss-ag-step-o {
  font-size: 12px; color: #6b6f76; background: #FAFAFB; border-radius: 8px;
  padding: var(--s-6) var(--s-8); margin-top: var(--s-6); line-height: 1.5; word-break: break-word;
}
.ss-ag-step-a { margin-top: var(--s-6); }
.ss-ag-mini {
  font-size: 12px; padding: 3px var(--s-10); border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .1); background: #fff; color: #6b6f76;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
.ss-ag-mini:active { transform: scale(.94); }

.ss-ag-chip {
  font-size: 12px; padding: 2px var(--s-8); border-radius: 999px;
  background: rgba(0, 0, 0, .05); color: #6b6f76; white-space: nowrap;
}
.ss-ag-chip.low { color: #137A52; background: rgba(34, 197, 94, .1); }
.ss-ag-chip.medium { color: #8A5A00; background: rgba(245, 158, 11, .12); }
.ss-ag-chip.high { color: #dc2626; background: rgba(239, 68, 68, .12); }
.ss-ag-chip.tool { color: var(--xhs-red-text, #D81B37); background: rgba(255, 36, 66, .08); }
.ss-ag-chip.dep { color: #7c3aed; background: rgba(124, 58, 237, .1); }
.ss-ag-chip.st { color: #52565c; }

.ss-ag-rate { display: inline-flex; gap: 3px; align-items: center; font-size: 12px; color: #6b6f76; }
.ss-ag-star {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .1);
  background: #fff; color: var(--xhs-red-text, #D81B37); font-size: 12px; cursor: pointer;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
.ss-ag-star:active { transform: scale(.9); }

/* ---------- 调用链 / 操作记录 ---------- */
.ss-ag-calls, .ss-ag-ops { display: flex; flex-direction: column; gap: var(--s-8); }
.ss-ag-call, .ss-ag-op {
  border: 1px solid rgba(0, 0, 0, .07); border-radius: 12px; padding: var(--s-10);
}
.ss-ag-call-h, .ss-ag-op-h { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; font-size: 13px; }
.ss-ag-call-h b, .ss-ag-op-h b { margin-right: auto; }
.ss-ag-why { font-size: 12px; color: #6E6869; margin-top: var(--s-4); line-height: 1.5; }
.ss-ag-out {
  font-size: 12px; color: #55595f; background: #FAFAFB; border-radius: 8px;
  padding: var(--s-6) var(--s-8); margin-top: var(--s-6); line-height: 1.5; word-break: break-word;
}
.ss-ag-ms { font-size: 12px; color: #6E6869; margin-top: var(--s-4); }
.ss-ag-undo {
  display: inline-flex; align-items: center; gap: 3px; font-size: 12px; cursor: pointer;
  padding: 3px var(--s-8); border-radius: 999px; border: 1px solid rgba(255, 36, 66, .3);
  background: #fff; color: var(--xhs-red-text, #D81B37);
  transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
.ss-ag-undo svg { width: 12px; height: 12px; }
.ss-ag-undo:active { transform: scale(.94); }

/* ---------- 知识图谱 ---------- */
.ss-ag-svg {
  width: 100%; height: 260px; display: block; background: #FAFAFB;
  border-radius: 14px; margin-bottom: var(--s-8);
}
.ss-ag-node { fill: #FF2442; cursor: pointer; transition: opacity .18s ease; }
.ss-ag-node[data-on="0"] { opacity: .35; }
.ss-ag-node.t-note { fill: #FF7A8E; }
.ss-ag-node.t-topic { fill: #FF2442; }
.ss-ag-node.t-brand { fill: #7c3aed; }
.ss-ag-node.t-category { fill: #f59e0b; }
.ss-ag-node.t-account { fill: #22c55e; }
.ss-ag-node.t-task { fill: #3b82f6; }
.ss-ag-edge { stroke: rgba(0, 0, 0, .12); stroke-width: .25; transition: stroke .18s ease; }
.ss-ag-edge[data-on="1"] { stroke: #FF2442; stroke-width: .5; }
.ss-ag-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-8); }
.ss-ag-kglist { display: flex; flex-direction: column; gap: var(--s-6); }
.ss-ag-kgnode { font-size: 12px; color: #333; display: flex; gap: var(--s-6); align-items: center; }

/* ---------- 成长 ---------- */
.ss-ag-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); margin-bottom: var(--s-12); }
.ss-ag-stat {
  background: linear-gradient(135deg, rgba(255, 122, 142, .1), rgba(255, 36, 66, .06));
  border-radius: 14px; padding: var(--s-12); text-align: center;
}
.ss-ag-stat b { display: block; font-size: 20px; color: var(--xhs-red-text, #D81B37); }
.ss-ag-stat span { font-size: 12px; color: #6E6869; }
.ss-ag-chips { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-8); }
.ss-ag-tpls { display: flex; flex-direction: column; gap: var(--s-6); }
.ss-ag-tpl {
  font-size: 12px; color: #333; background: #FAFAFB; border-radius: 10px;
  padding: var(--s-8) var(--s-10); display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap;
  line-height: 1.5;
}
.ss-ag-tpl b { font-weight: 600; }

/* ---------- 确认卡（面板外，独立） ---------- */
.ss-ag-cf {
  position: fixed; right: 24px; bottom: 100px; z-index: var(--z-widget, 1200); width: 300px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 16px; padding: var(--s-14);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none;
  transition: opacity .22s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1);
}
.ss-ag-cf[data-show="1"] { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ss-ag-cf-t { font-size: 13px; color: #333; margin-bottom: var(--s-4); }
.ss-ag-cf-t b { color: var(--xhs-red-text, #D81B37); }
.ss-ag-cf-b { font-size: 12px; color: #6b6f76; }
.ss-ag-cf-p {
  font-size: 12px; color: #6E6869; background: #FAFAFB; border-radius: 10px;
  padding: var(--s-8); margin: var(--s-8) 0; max-height: 120px; overflow: auto; white-space: pre-wrap;
  font-family: inherit; line-height: 1.5;
}
.ss-ag-cf-a { display: flex; gap: var(--s-8); justify-content: flex-end; }

/* ---------- 轻提示 ---------- */
.ss-ag-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: rgba(0, 0, 0, .82); color: #fff; font-size: 13px;
  padding: var(--s-8) var(--s-16); border-radius: 999px; z-index: 2000; max-width: 80vw;
  opacity: 1; transition: opacity .2s ease, transform .2s ease;
}
.ss-ag-toast[data-out="1"] { opacity: 0; transform: translateX(-50%) translateY(6px); }

/* ---------- 移动端：图谱降级、确认卡贴底 ---------- */
@media (max-width: 767px) {
  .ss-ag-cf { right: 12px; left: 12px; bottom: 84px; width: auto; }
  .ss-ag-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 尊重 prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ss-ag, .ss-ag-btn, .ss-ag-tab, .ss-ag-mini, .ss-ag-star, .ss-ag-undo,
  .ss-ag-close, .ss-ag-cf, .ss-ag-bar i, .ss-ag-toast {
    transition: none !important;
  }
  .ss-ag { transform: none; }
  .ss-ag-cf { transform: none; }
}