/* ==========================================================
   工单自动化处理 · 交互演示
   复用 demo.css 的纸面/黑墨/橙色体系
   ========================================================== */

.stage.auto{grid-template-columns:320px minmax(0,1fr)}

/* ---------------- 待处理队列 ---------------- */
.queue{
  background:var(--mock-bg);
  border:1px solid var(--mock-line);
  box-shadow:0 30px 70px -52px rgba(20,17,15,.55);
  display:flex;flex-direction:column;
  min-width:0;
}
.queue-top{
  padding:.8rem .9rem;border-bottom:1px solid var(--mock-line);
  background:#FBF7EE;
}
.queue-top h2{
  font-family:var(--serif);font-weight:400;font-size:1.0625rem;
  letter-spacing:-.01em;
}
.queue-top p{margin-top:.15rem;font-size:.6875rem;color:var(--ink-faint)}

.qlist{padding:.45rem;display:flex;flex-direction:column;gap:.2rem}
.qrow{
  display:flex;flex-direction:column;gap:.28rem;
  width:100%;text-align:left;
  padding:.55rem .6rem;
  border:1px solid transparent;background:transparent;
  cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.qrow:hover{background:color-mix(in srgb,var(--ink) 3%,transparent);border-color:var(--mock-line)}
.qrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.qrow.is-on{
  background:#fff;
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
  box-shadow:inset 3px 0 0 var(--accent);
}
.qtop{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.q-id{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.625rem;letter-spacing:.04em;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.q-title{font-size:.8125rem;font-weight:500;line-height:1.45;color:var(--ink)}
.q-meta{font-size:.625rem;color:var(--ink-faint)}
.q-kind{
  flex:none;white-space:nowrap;
  font-size:.5625rem;letter-spacing:.06em;
  padding:.1rem .35rem;border:1px solid var(--mock-line);
  color:var(--ink-faint);
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.q-kind[data-k="run"]{color:var(--accent-deep);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.q-kind[data-k="auto"]{color:#2F6B41;border-color:#BFD8C5;background:#EEF6F0}
.q-kind[data-k="human"]{color:var(--accent-deep);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}

.queue-foot{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.55rem .9rem;border-top:1px solid var(--mock-line);
  background:#FBF7EE;font-size:.625rem;color:var(--ink-faint);
}
.run-link{
  font-size:.625rem;letter-spacing:.04em;color:var(--accent-deep);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  padding-bottom:.05rem;flex:none;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.run-link:hover{color:var(--accent);border-color:var(--accent)}

/* ---------------- 执行控制台 ---------------- */
.console{
  background:var(--mock-bg);
  border:1px solid var(--mock-line);
  box-shadow:0 30px 70px -52px rgba(20,17,15,.55);
  display:flex;flex-direction:column;
  min-width:0;
}
.console-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:.85rem 1rem;border-bottom:1px solid var(--mock-line);
  background:#FBF7EE;
}
.console-heading{min-width:0}
.console-id{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.625rem;letter-spacing:.06em;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.console-title{
  margin-top:.3rem;font-size:1.0625rem;font-weight:700;line-height:1.4;
  letter-spacing:-.005em;
}
.console-sub{margin-top:.25rem;font-size:.6875rem;color:var(--ink-faint)}
.engine{
  flex:none;display:inline-flex;align-items:center;gap:.4rem;
  padding:.22rem .5rem;border:1px solid var(--mock-line);
  font-size:.5625rem;letter-spacing:.06em;color:var(--ink-faint);
  white-space:nowrap;
}
.engine i{
  width:6px;height:6px;border-radius:50%;background:#5E9B6C;display:block;
  box-shadow:0 0 0 3px rgba(94,155,108,.16);
}
.engine b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;font-size:.5625rem;color:var(--ink-soft);
}

.console-body{
  padding:clamp(.85rem,2vw,1.1rem);
  display:flex;flex-direction:column;gap:.85rem;
  min-width:0;
}

/* 分流结论 */
.verdict{
  border:1px solid var(--mock-line);border-left:3px solid var(--mock-line);
  background:#FCF9F2;padding:.65rem .8rem;
}
.verdict[data-k="auto"]{border-left-color:#5E9B6C}
.verdict[data-k="human"]{border-left-color:var(--accent)}
.verdict-label{display:flex;align-items:baseline;gap:.6rem}
.verdict-label b{font-size:.8125rem;font-weight:700;letter-spacing:.01em}
.verdict[data-k="auto"] .verdict-label b{color:#2F6B41}
.verdict[data-k="human"] .verdict-label b{color:var(--accent-deep)}
.verdict-conf{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.625rem;color:var(--ink-faint);
}
.verdict-conf:empty{display:none}
.verdict-reason{margin-top:.35rem;font-size:.75rem;line-height:1.65;color:var(--ink-soft)}
.verdict-skill{
  margin-top:.4rem;padding-top:.4rem;border-top:1px dashed var(--mock-line);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.625rem;color:var(--ink-faint);
}
.verdict-skill:empty{display:none}

/* 运行条 */
.runbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.runbar .btn{min-width:128px}
.btn-accent.is-busy{background:var(--ink);opacity:1;cursor:progress}
.run-hint{font-size:.6875rem;line-height:1.55;color:var(--ink-faint)}

/* 执行轨迹 */
.trace{display:flex;flex-direction:column}
.trace:empty{display:none}
.trace.is-static .trace-step{animation:none;opacity:1;transform:none}
.trace-hint{
  font-size:.75rem;line-height:1.7;color:color-mix(in srgb,var(--ink) 38%,transparent);
  border:1px dashed var(--mock-line);padding:.8rem .9rem;
}
.trace-step{
  display:grid;grid-template-columns:24px minmax(0,1fr);
  gap:.1rem .6rem;
  padding:.5rem 0;border-bottom:1px solid var(--mock-line);
  animation:stepIn .34s var(--ease) both;
}
@keyframes stepIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ts-idx{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.625rem;color:var(--ink-faint);line-height:1.9;
  font-variant-numeric:tabular-nums;
}
.ts-main{min-width:0}
.ts-tool{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.ts-tool code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 5%,transparent);
  padding:.05rem .3rem;
}
.ts-arg{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.625rem;color:var(--ink-faint);
  word-break:break-word;min-width:0;
}
.ts-ms{
  margin-left:auto;flex:none;
  font-size:.5625rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.ts-state{
  display:block;margin-top:.15rem;
  font-size:.6875rem;line-height:1.6;color:var(--ink-soft);
}
.ts-state::before{content:"→ ";color:var(--ink-faint)}
.trace-step.is-done .ts-state{color:#2F6B41}
.trace-step.is-stop{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.trace-step.is-stop .ts-idx{color:var(--accent-deep);font-weight:700}
.trace-step.is-stop .ts-tool code{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent-deep);
}
.trace-step.is-stop .ts-state{color:var(--accent-deep);font-weight:500}
.trace-step.is-stop .ts-state::before{content:"■ ";font-size:.5rem;vertical-align:.1em}

/* 结果 */
.outcome{
  border:1px solid var(--mock-line);padding:.75rem .85rem;
  display:flex;flex-direction:column;gap:.55rem;
  animation:stepIn .34s var(--ease) both;
}
.outcome[data-k="auto"]{border-color:#BFD8C5;background:#F4FAF5}
.outcome[data-k="human"]{border-color:color-mix(in srgb,var(--accent) 32%,transparent);background:#FFF8F3}
.outcome h3{font-size:.75rem;font-weight:700;letter-spacing:.05em}
.outcome[data-k="auto"] h3{color:#2F6B41}
.outcome[data-k="human"] h3{color:var(--accent-deep)}
.outcome-reply{
  background:#fff;border-left:2px solid #BFD8C5;
  padding:.5rem .65rem;font-size:.75rem;line-height:1.7;color:var(--ink-soft);
}
.outcome-list{display:flex;flex-direction:column;gap:.3rem}
.outcome-row{display:grid;grid-template-columns:4.8rem minmax(0,1fr);gap:.6rem;font-size:.75rem}
.outcome-row dt{font-size:.625rem;letter-spacing:.04em;color:var(--ink-faint);padding-top:.1rem}
.outcome-row dd{color:var(--ink-soft);line-height:1.6}
.outcome-foot{
  font-size:.625rem;color:var(--ink-faint);line-height:1.6;
  border-top:1px dashed var(--mock-line);padding-top:.45rem;
}

.console-foot{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 1rem;border-top:1px solid var(--mock-line);
  background:#FBF7EE;font-size:.625rem;color:var(--ink-faint);
}
.console-status{color:var(--ink-soft);font-variant-numeric:tabular-nums;transition:color .2s var(--ease)}
.console-status.is-run{color:var(--accent-deep)}
.console-status.is-done{color:#2F6B41}

/* ---------------- Skill 库 ---------------- */
.skills{margin-top:clamp(1.6rem,3vw,2.4rem)}
.skills-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding-bottom:.8rem;border-bottom:1px solid var(--line);
}
.skills-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);
  letter-spacing:-.01em;
}
.skills-head p{font-size:.75rem;color:var(--ink-faint)}
.skill-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.6rem,1.4vw,.85rem);margin-top:.9rem;
}
.skill{
  display:flex;flex-direction:column;gap:.35rem;
  border:1px solid var(--line);padding:.8rem .85rem;
  background:color-mix(in srgb,var(--mock-bg) 72%,transparent);
  min-width:0;
}
.skill h3{
  display:flex;flex-direction:column;gap:.2rem;
  font-size:.8125rem;font-weight:700;line-height:1.45;
}
.skill h3 code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.625rem;font-weight:400;letter-spacing:.02em;
  color:var(--accent-deep);
}
.skill-trigger{font-size:.6875rem;line-height:1.65;color:var(--ink-soft)}
.skill-meta{
  margin-top:auto;display:flex;flex-wrap:wrap;gap:.2rem .55rem;
  padding-top:.4rem;border-top:1px dashed var(--mock-line);
  font-size:.625rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.skill-edge{font-size:.625rem;line-height:1.55;color:var(--accent-deep)}
.skills + .app-note{margin-top:1.1rem}

/* ---------------- 响应式 ---------------- */
@media (min-width:901px){
  .queue{position:sticky;top:20px}
}
@media (max-width:1120px){
  .stage.auto{grid-template-columns:280px minmax(0,1fr)}
}
@media (max-width:900px){
  .stage.auto{grid-template-columns:minmax(0,1fr)}
  .queue{position:static}
  .qlist{
    flex-direction:row;overflow-x:auto;overscroll-behavior-x:contain;
    padding:.5rem;scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }
  .qrow{flex:none;width:min(76vw,264px);scroll-snap-align:start}
  .skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .console-top{flex-direction:column;gap:.55rem}
  .engine{align-self:flex-start}
  .console-title{font-size:1rem}
  .runbar{flex-direction:column;align-items:stretch;gap:.5rem}
  .runbar .btn{width:100%}
  .skill-grid{grid-template-columns:minmax(0,1fr)}
  .outcome-row{grid-template-columns:1fr;gap:.05rem}
  .console-foot{flex-direction:column;align-items:flex-start;gap:.2rem}
}