/* Comments: the annotate control on chat steps, the Comments tab of the side pane, the step view (stepview.js),
   and the banner of an imported evaluation-agent run. */
.cm-mark{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 5px;border-radius:var(--r-full);color:var(--accent-deep);background:var(--accent-soft);font-size:var(--fs-1);flex:none;cursor:pointer}
.cm-mark i{font-style:normal;font-variant-numeric:tabular-nums}
.cm-mark svg{color:inherit !important;width:12px !important;height:12px !important;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linejoin:round;flex:none}
.cm-mark.zero{background:transparent;color:var(--fg-3);opacity:0}
.act-h:hover .cm-mark.zero,.cm-mark.zero:focus-visible{opacity:1}
.cm-mark.zero:hover{color:var(--accent-deep);background:var(--accent-soft)}
.cm-mark.cm-ans{height:24px;padding:0 var(--sp-2);gap:5px;background:transparent;color:var(--fg-3);font-size:var(--fs-2);align-self:flex-start}
.cm-mark.cm-ans:hover,.cm-mark.cm-ans.has{color:var(--accent-deep);background:var(--accent-soft)}
.an-fb .cm-mark.cm-ans{width:auto;margin-left:var(--sp-1)}
.cl-row .cm-mark{margin-left:var(--sp-2);vertical-align:middle}
@keyframes cmflash{0%{box-shadow:0 0 0 2px var(--accent)}100%{box-shadow:0 0 0 2px transparent}}
.cm-flash{animation:cmflash 1.6s ease-out;border-radius:var(--r8)}
/* a comment */
.cm{background:var(--bg);border-radius:var(--r8);box-shadow:0 0 0 1px var(--line);padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.cm.cm-reply{box-shadow:none;border-left:2px solid var(--line-2);border-radius:0;padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);margin-top:var(--sp-1);background:transparent}
.cm-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-2)}
.cm-meta b{font-weight:600;color:var(--fg)}
.cm-av,.ev-av{display:inline-flex;vertical-align:-3px;flex:none}.ev-av{margin-right:5px}
.cm-kind{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:var(--r-full);font:500 var(--fs-1) var(--font);background:var(--bg-3);color:var(--fg-2);white-space:nowrap}
.cm-kind.k-reviewer,.cmp-f.k-reviewer.on{background:var(--warn-soft);color:var(--warn)}
.cm-kind.k-analyst,.cmp-f.k-analyst.on{background:var(--accent-soft);color:var(--accent-deep)}
.cm-kind.k-evaluator,.cmp-f.k-evaluator.on{background:var(--signal-soft);color:var(--signal)}
.cm-kind.k-user,.cmp-f.k-user.on{background:var(--ok-soft);color:var(--ok)}
.cm-a{font-size:var(--fs-2);color:var(--fg-3);padding:0 var(--sp-1);border-radius:var(--r4)}
.cm-a:hover{color:var(--accent-deep);background:var(--accent-soft)}
.cm-body{font-size:var(--fs-3);overflow-wrap:anywhere}
.cm-body>:first-child{margin-top:0}.cm-body>:last-child{margin-bottom:0}
.cm-src{font-size:var(--fs-1);overflow-wrap:anywhere}
.cm-quote{font:var(--fs-2)/1.45 var(--mono);color:var(--fg-2);border-left:2px solid var(--accent);padding:1px var(--sp-2);background:var(--accent-soft);border-radius:0 var(--r4) var(--r4) 0;overflow-wrap:anywhere}
.cm-quote.on{display:flex;gap:var(--sp-2);align-items:flex-start}.cm-quote.on .cm-a{margin-left:auto}
.cm-hist{flex-basis:100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cm-arrow{color:var(--fg-3);padding:0 2px}
.cm-form{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-1)}
.cm-t{width:100%;min-height:54px;resize:vertical;border-radius:var(--r8);box-shadow:0 0 0 1px var(--line-2);background:var(--bg);color:var(--fg);padding:var(--sp-2);font:inherit;border:0}
.cm-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.cm-name{height:26px;width:150px;border-radius:var(--r8);box-shadow:0 0 0 1px var(--line-2);background:var(--bg);color:var(--fg);padding:0 var(--sp-2);border:0;font:inherit;font-size:var(--fs-2)}
.cm-lab summary{font-size:var(--fs-2);color:var(--fg-2);cursor:pointer}
.cm-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding-top:var(--sp-1)}
.cm-chips button,.cmp-f{height:22px;padding:0 var(--sp-2);border-radius:var(--r-full);font-size:var(--fs-1);background:var(--bg-3);color:var(--fg-2)}
.cm-chips button.on{background:var(--err-soft);color:var(--err)}.cm-chips button.good.on{background:var(--ok-soft);color:var(--ok)}
.cmp-f.on{background:var(--fg);color:var(--bg)}
/* the Comments tab */
.pn-view.cmp-view{padding:0;display:flex;flex-direction:column;overflow:hidden}
.cmp-tabs{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);flex:none}
.cmp-body{flex:1;min-height:0;overflow:auto}
.cmp{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3)}
.cmp-verdict{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:var(--sp-2) var(--sp-3);border-radius:var(--r8);background:var(--bg-2);box-shadow:0 0 0 1px var(--line);font-size:var(--fs-2)}
.cmp-vl{font-weight:600;font-size:var(--fs-3)}
.cmp-bar,.cmp-kinds,.cmp-sh{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.cmp-g{display:flex;flex-direction:column;gap:var(--sp-2);cursor:pointer}
.cmp-g .cm{cursor:pointer}.cmp-g:hover .cmp-gt{color:var(--accent-deep)}
.cmp-gh{display:flex;align-items:center;gap:var(--sp-2)}
.cmp-gt{font-weight:600;font-size:var(--fs-3);text-align:left}
.cmp-empty{height:auto;padding:var(--sp-6) var(--sp-3);text-align:center}
.cmp-new{display:flex;flex-direction:column;gap:var(--sp-1);padding-top:var(--sp-2);border-top:1px solid var(--line)}
.cmp-chain{display:flex;flex-direction:column;gap:var(--sp-2)}
.cmp-tip{margin-top:calc(-1 * var(--sp-2))}
/* the step view */
.sv{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.sv-lbl{font:600 var(--fs-1) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.sv-lbl .mono{text-transform:none;letter-spacing:0}
.sv-code{margin:0;padding:var(--sp-2) var(--sp-3);border-radius:var(--r8);background:var(--bg-2);box-shadow:0 0 0 1px var(--line);font:var(--fs-2)/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:340px;overflow:auto}
.sv-rows{max-height:300px;overflow:auto}
.sv-map{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-2)}
.sv-q{padding:var(--sp-2) var(--sp-3);border-radius:var(--r8);background:var(--bg-2);box-shadow:0 0 0 1px var(--line)}
.sv-hits{display:flex;flex-direction:column;gap:var(--sp-2)}.sv-hit b{font-weight:600}
.sv-ans{padding:var(--sp-2) var(--sp-3);border-radius:var(--r8);box-shadow:0 0 0 1px var(--line);max-height:420px;overflow:auto}
mark.sv-anchor{background:var(--accent-soft);color:inherit;border-bottom:2px solid var(--accent);cursor:pointer;border-radius:2px}
mark.sv-anchor.has-issue{background:var(--warn-soft);border-bottom-color:var(--warn)}
/* imported runs */
.imp-who{display:inline-flex;align-items:center;gap:6px;color:var(--fg-2)}
.imp-banner{border-radius:var(--r12);background:var(--accent-soft);padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1)}
.imp-t{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.imp-qs{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding-top:var(--sp-1)}
.imp-q{display:inline-flex;align-items:center;gap:var(--sp-1);height:22px;padding:0 var(--sp-2);border-radius:var(--r-full);background:var(--bg);box-shadow:0 0 0 1px var(--line);font:500 var(--fs-1) var(--mono);color:var(--fg-2)}
.imp-q:hover{color:var(--accent-deep);box-shadow:0 0 0 1px var(--accent)}
.imp-q i{font-style:normal;color:var(--fg-3)}
.imp-sh{flex:none;margin-left:auto}.imp-sh+.am{margin-left:0}
/* Evaluations: evaluation-agent results inside an item's detail */
.ev-cl{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-3)}
.ev-cl-c{border-radius:var(--r8);box-shadow:0 0 0 1px var(--line);background:var(--bg);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.ev-cl-h{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.ev-cl-h b{font-weight:600}
.ev-cl-a{max-height:220px;overflow:auto;font-size:var(--fs-3)}
.ev-cl-k{font-size:var(--fs-2);color:var(--fg-2);overflow-wrap:anywhere}
.ev-cl-k b{color:var(--fg);font-weight:600}