/* Vici shared Vicit block - the task's block in the thread.
   The modal is the master copy: rules moved verbatim, in source order, from
   dock/panel/panel.css; loaded after the other shared sheets and before the
   host's own (panel.css here, styles.css on the web under /panel/).
   The block and its head (the runner's still frame, the task, the phase, the
   count), the steps and their fold, the live line, the task continuing under
   the person's answer or steer, what Vicit said and its report, the question
   with its choices and preview, notes and errors, the task's own controls
   and its instruction editor, the verdict tap on an ended task, a steering
   send's receipt and delivery badge.
   The runner's frames are turned by the page's script, never by CSS. The
   glass card (.vi-*, .vicit-indicator), the task row's place beside the
   composer (.vicit-controls), the @ chip and the step beam are the dock's.
   The task's buttons (.vicit-ctl) and the drawn icons inside the block
   (.vi-icon, .vi-choice-arrow) are here: the block draws them in the thread.
   Shared files (dock/HANDOFF.md, "Shared files"): they hold exactly what the
   modal ships; a host need is a selector in the host's own sheet; no
   transition, animation, filter or blur, and no CSS the board's WebKit has
   not already shipped; every rule renders right with no host-toggled class.
   An edit here is a dock landing (live first) that also deploys the web. */

/* the task's buttons: the block's own controls, a question's Send answer,
   the instruction field's send, and the row beside the modal's composer */
.vicit-ctl {
  appearance: none;
  height: 26px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.vicit-ctl[hidden] { display: none; }
.vicit-ctl:hover, .vicit-ctl.kb-hover { color: var(--accent-link); }
.vicit-ctl.stop {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: var(--danger-soft);
}
.vicit-ctl.stop:hover, .vicit-ctl.stop.kb-hover { color: var(--danger); }

/* the block: a step list on the panel itself, no bubble (a reply's
   chrome rule, Max 2026-08-25) */
.vicit-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
  min-width: 0;
}
.vicit-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 3px 10px;
  font-size: 12.5px;
}
.vicit-head > .vicit-runner { grid-column:1; grid-row:1; align-self:center; }
.vicit-head-meta { grid-column:2; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-height:24px; font-size:12.5px; line-height:24px; }
.vicit-head-meta[hidden],.vicit-count[hidden] { display:none; }
.vicit-cont-meta { margin-left:34px; }
.vicit-name {
  font-weight: 650;
  color: var(--accent-link);
}
.vicit-runner {
  display:inline-block; flex:0 0 24px; width:24px; height:24px; align-self:center;
  background-image:url("assets/vicit-runner-pearl.png");
  background-repeat:no-repeat; background-size:400% 100%; background-position:0 0;
  pointer-events:none; user-select:none; image-rendering:pixelated;
}
:root[data-theme="dark"] .vicit-runner { background-image:url("assets/vicit-runner-graphite.png"); }
.vicit-head-label { grid-column:2; color:var(--text); min-width:0; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.vicit-block[data-state="paused"] .vicit-head-label,
.vicit-block[data-state="waiting"] .vicit-head-label { color: var(--idle); font-weight: 600; }
.vicit-block[data-state="failed"] .vicit-head-label { color: var(--danger); font-weight: 600; }
.vicit-block[data-state="finished"] .vicit-head-label { color: var(--ok); font-weight: 600; }
.vicit-count {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vicit-steps { display:flex; flex-direction:column; gap:6px; margin-left:34px; }
.vicit-face { margin-left:34px; }
.vicit-more {
  appearance: none;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.vicit-more::before { content: "▸ "; }
.vicit-more[aria-expanded="true"]::before { content: "▾ "; }
.vicit-more[hidden] { display: none; }
.vicit-more:hover, .vicit-more.kb-hover { color: var(--accent-link); }
.vicit-older { display: flex; flex-direction: column; gap: 1px; }
/* a step is one quiet line — Vicit's narration of what it is
   doing — on a thin rail; the newest row is upright and lit by the
   accent, the history recedes. No screenshot is ever drawn here: the
   person reads the work, not Vicit's eyes (Max, 2026-09-11). */
.vicit-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 10px;
  align-items: baseline;
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--border);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
  color: var(--muted);
}
.vicit-step.current {
  border-left-color: var(--accent-link);
  color: var(--text);
  font-size: 13px;
  font-style: normal;
}
.vicit-step[data-status="refused"], .vicit-step[data-status="failed"] {
  border-left-color: var(--danger);
}
.vicit-step-why { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.vicit-step-status {
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.vicit-step-status:empty { display: none; }
.vicit-step[data-status="refused"] .vicit-step-status,
.vicit-step[data-status="failed"] .vicit-step-status { color: var(--danger); }
.vicit-step-live {
  grid-column: 1 / -1;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.vicit-step-live:empty { display: none; }
.vicit-actions { grid-column:1 / -1; min-width:0; color:var(--muted); font-size:11px; }
.vicit-actions-summary { width:fit-content; cursor:pointer; padding:2px 0; }
.vicit-actions-summary:hover { color:var(--accent-link); }
.vicit-action-list { display:flex; flex-direction:column; gap:3px; padding:4px 0 2px 12px; }
.vicit-action { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px; }
.vicit-action-label { overflow-wrap:anywhere; }
.vicit-action-status { font-size:10px; }
.vicit-action[data-status="refused"] .vicit-action-status,
.vicit-action[data-status="failed"] .vicit-action-status { color:var(--danger); }
/* a working task keeps its live line under the newest row, so a label
   arriving there never moves what sits below */
.vicit-block[data-state="working"] .vicit-step.current .vicit-step-live:empty {
  display: block;
  min-height: 15px;
}
/* the lone live line of a tail that has no step yet (the thread being
   prepared, the moment after an answer) */
.vicit-live { padding:4px 0 4px 12px; border-left:2px solid var(--accent-link); font-size:12px; line-height:1.45; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.vicit-live:empty { display: none; }
/* the task continues under the person's answer or steer (docs/vicit.md
   §40, the sequence): the same rows and a compact progress header, so
   the thread reads top to bottom and the newest step is always last */
.vicit-cont { padding: 6px 0 0; }
/* Keep one measured event row while each speaker owns its ordinary side. */
.conversation-message.human.has-vicit-cont { width:100%; max-width:none; align-self:stretch; margin-left:0; }
.conversation-message.human.has-vicit-cont > :not(.vicit-cont) { width:86%; max-width:720px; box-sizing:border-box; align-self:flex-end; }
.conversation-message.human.has-vicit-cont > .conversation-message-body:not(.virtual-answer) { width:fit-content; max-width:min(86%,720px); }
.conversation-message.human.has-vicit-cont > .vicit-cont { width:86%; max-width:720px; align-self:flex-start; }
.conversation-message.human > .vicit-input-receipt,
.conversation-message.human.has-vicit-cont > .vicit-input-receipt { width:fit-content; max-width:100%; align-self:flex-end; }
.vicit-input-receipt .vicit-ctl { border:0; border-radius:4px; padding:2px 0; background:transparent; color:var(--muted); font-size:11px; }
.vicit-input-receipt .vicit-ctl:hover,.vicit-input-receipt .vicit-ctl.kb-hover { color:var(--text); text-decoration:underline; }
.vicit-result-actions[hidden] { display:none; }
.vicit-said[hidden] { display: none; }
/* A result keeps the same semantic Markdown as an ordinary answer: day
   headings, list nesting/numbering, and table columns retain their meaning. */
.vicit-report { margin-top:2px; padding-top:8px; border-top:1px solid var(--border); }
.vicit-face:empty { display: none; }
.vicit-face { display: flex; flex-direction: column; gap: 6px; }
.vicit-face:empty { display: none; }
.vicit-question-text { font-weight: 600; }
.vicit-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vicit-option {
  appearance: none;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.vicit-option:hover, .vicit-option.kb-hover { color: var(--accent-link); }
/* the person's own words: a quieter chip that opens the composer */
.vicit-option-else { border-style: dashed; background: transparent; color: var(--muted); }
.vicit-question-hint, .vicit-note { font-size: 11px; color: var(--muted); }
.vicit-error { color: var(--danger); }
.vicit-run-again {
  appearance: none;
  align-self: flex-start;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.vicit-run-again:hover, .vicit-run-again.kb-hover { color: var(--accent-link); }
/* a steering send's delivery label in the badge slot */
.vicit-steering-label { color: var(--muted); font-style: italic; }
.vicit-delivery { text-transform: none; }
.vicit-delivery.pending { color: var(--muted); }
.vicit-delivery.sent { color: var(--ok); border-color: var(--ok); }
.vicit-delivery.failed { color: var(--danger); border-color: var(--danger); }
.vicit-retry {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--danger);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.vicit-question-text { font-size:16px; line-height:22px; font-weight:600; margin-bottom:8px; }
.vicit-question-detail { color:var(--muted); font-size:13px; margin:0 0 12px; }
.vicit-question-preview { padding:12px; margin:12px 0; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.vicit-preview-title { font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.vicit-preview-text { max-height:120px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.vicit-options { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; max-height:200px; overflow:auto; }
.vicit-options.clarification { flex-direction:column; flex-wrap:nowrap; }
.vicit-option { min-height:32px; border:1px solid var(--control-border); border-radius:7px; background:var(--surface); color:var(--text); padding:6px 12px; text-align:left; cursor:pointer; font:inherit; font-size:13px; line-height:18px; }
.vicit-options.clarification .vicit-option { display:flex; flex-direction:column; flex-shrink:0; padding:10px 12px; }
.vicit-choice-detail { display:block; font-size:11.5px; color:var(--muted); line-height:16px; }
.vicit-option.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.vicit-option:disabled { cursor:default; opacity:.55; }
.vicit-option:disabled { opacity:1; color:var(--muted); background:var(--surface-2); }
.vicit-option.primary:disabled { color:#fff; background:var(--accent); }
.vi-icon { display:inline-flex; flex:none; width:16px; height:16px; }
.vi-icon svg { width:100%; height:100%; }
.vicit-options.clarification .vicit-option { position:relative; padding-right:36px; }
.vicit-choice-label,.vicit-choice-detail { overflow-wrap:anywhere; }
.vi-choice-arrow { position:absolute; right:12px; top:calc(50% - 8px); color:var(--muted); }
/* Compact task request and an always-reachable, single-line steering field. */
.vicit-task-toggle { appearance:none; display:block; width:100%; border:0; padding:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.vicit-task-brief { white-space:normal; overflow-wrap:anywhere; }
.vicit-task-disclosure { display:block; color:var(--accent-link); font-size:11px; line-height:16px; font-weight:400; margin-top:3px; }
.vicit-task-full { margin-top:10px; font-size:13px; line-height:19px; font-weight:400; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; }
.vicit-task-full[hidden] { display:none; }
.vicit-head-phase { color:var(--muted); font-size:11px; }
/* Event-driven task replies; the main composer stays ordinary chat. */
.vicit-task-input { display:flex; gap:8px; align-items:center; margin-top:8px; }
.vicit-task-input input { flex:1; min-width:0; border:1px solid var(--border); border-radius:8px; padding:8px; color:inherit; background:transparent; }
.vicit-task-input[hidden] { display:none; }
.vicit-edit-toggle { appearance:none; border:0; padding:2px 0; background:transparent; color:var(--muted); font:inherit; font-size:11px; cursor:pointer; }
.vicit-edit-toggle:hover,.vicit-edit-toggle.kb-hover,.vicit-edit-toggle[aria-expanded="true"] { color:var(--accent-link); }
.vicit-instruction-editor .vicit-task-input { margin-top:6px; }
.vicit-steer-send { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; padding:6px; border-radius:8px; }
.vicit-steer-send:disabled { opacity:.35; cursor:default; }
.vicit-steer-send .vi-icon { display:block; width:18px; height:18px; }
.vicit-task-controls { display:flex; gap:8px; margin-top:8px; }
/* The verdict tap on an ended task: three quiet words on one still row and,
   once one stands, a line for the person's own. The word that stands takes
   its weight and the colour the head gives that outcome (ok, idle, danger).
   A tap changes an attribute; nothing here moves. */
.vicit-verdict { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; min-width:0; }
.vicit-verdict-choices { display:flex; align-items:baseline; gap:6px; }
.vicit-verdict-choice { appearance:none; border:0; padding:2px 0; background:transparent; color:var(--muted); font:inherit; font-size:11px; cursor:pointer; }
.vicit-verdict-choice:hover,.vicit-verdict-choice.kb-hover { color:var(--accent-link); }
.vicit-verdict-choice[aria-pressed="true"] { color:var(--text); font-weight:600; }
.vicit-verdict-choice[aria-pressed="true"][data-value="right"] { color:var(--ok); }
.vicit-verdict-choice[aria-pressed="true"][data-value="partly"] { color:var(--idle); }
.vicit-verdict-choice[aria-pressed="true"][data-value="wrong"] { color:var(--danger); }
.vicit-verdict-dot { color:var(--muted); font-size:11px; }
.vicit-verdict-words { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0; }
.vicit-verdict-words[hidden],.vicit-verdict-note[hidden] { display:none; }
.vicit-verdict-note { min-width:0; color:var(--text); font-size:11px; overflow-wrap:anywhere; }
.vicit-verdict > .vicit-task-input { flex:1 0 100%; margin-top:4px; }
.vicit-verdict .vicit-ctl:disabled { opacity:.35; cursor:default; }
.vicit-runtime { font-size: 12px; line-height: 1.5; color: var(--muted); }
.vicit-runtime { margin: 4px 0 8px; }
/* the task file the run follows (docs/vici-md.md): "Following: <name>" */
.vicit-procedure { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 4px 0 0; }
.vicit-procedure[hidden], .vicit-runtime[hidden] { display: none; }

/* History is a deliberate next-turn state, never a completion timer. The
   same title, runner and full report nodes remain available to expand. */
.vicit-history-receipt { margin-left:34px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.vicit-history-receipt[hidden],.vicit-history-preview[hidden] { display:none; }
.vicit-history-preview { color:var(--muted); font-size:12px; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vicit-history-toggle { appearance:none; align-self:flex-start; padding:0; border:0; background:transparent; color:var(--accent-link); font:inherit; font-size:11px; line-height:18px; cursor:pointer; }
.vicit-history-toggle:hover,.vicit-history-toggle.kb-hover { text-decoration:underline; }
.vicit-history-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.vicit-receipt-collapsed > .vicit-steps,
.vicit-receipt-collapsed > .vicit-said,
.vicit-receipt-collapsed > .vicit-result-actions,
.vicit-receipt-collapsed > .vicit-face,
.vicit-receipt-collapsed > .vicit-runtime,
.vicit-receipt-collapsed > .vicit-procedure,
.vicit-cont.vicit-receipt-collapsed { display:none; }
/* A question takes the activity's place inside the same task. Its cached
   field and choices keep their identity while status updates arrive. */
.vicit-has-question > .vicit-steps,
.vicit-has-question > .vicit-said,
.vicit-has-question > .vicit-result-actions { display:none; }