/* The REPL's assistant (assist.js): ask mode at the prompt, its answers in
   the transcript, and the live preview of a query. Violet marks the
   assistant, as green marks Slog. */
:root { --violet: #6c71c4; --violet-tint: #f1f0fa; }

/* ---- The prompt ---------------------------------------------------------- */

.prompt-row { position: relative; }
.prompt-row.ask { background: var(--violet-tint); box-shadow: inset 3px 0 0 var(--violet); }
.prompt-row.ask .caret { color: var(--violet); }
/* Ask mode was chosen: how to ask, and how to leave, show without hints. */
#repl .prompt-row.ask #prompt::placeholder { color: var(--muted); }
.assist-tag {
  height: 20px;
  padding: 0 8px;
  border: none;
  border-radius: 999px;
  background: white;
  color: var(--violet);
  font: 11px var(--sans);
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.assist-tag:hover:not(:disabled) { background: white; color: var(--strong); }

/* Floats over the transcript's foot, so it never moves anything. */
.assist-preview {
  position: absolute;
  right: 14px;
  bottom: calc(100% + 4px);
  z-index: 10;
  max-width: min(60%, 560px);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(7, 54, 66, 0.08);
  font: 11.5px/1.5 var(--mono);
  color: var(--text);
  pointer-events: none;
}
.assist-preview .total { color: var(--blue); font-weight: 600; }
.assist-preview .row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assist-preview .more { color: var(--muted); }
.assist-preview.failed { color: var(--red); border-color: rgba(220, 50, 47, 0.35); background: var(--red-tint); }

/* ---- Answers in the transcript --------------------------------------------- */

#transcript .entry { position: relative; }
.entry.assist .line { color: var(--violet); }
.entry.assist .line::before { content: "✦ "; color: var(--violet); }
.entry.assist.follow .line::before { content: "↳ "; }
.assist-body { font: 13px/1.5 var(--sans); color: var(--text); padding: 2px 0 0 14px; max-width: 80ch; }
.assist-body .error { margin-top: 4px; }
.assist-activity { color: var(--muted); padding-left: 14px; font: italic 12px var(--sans); }
.assist-foot { display: flex; gap: 12px; padding: 2px 0 0 14px; color: var(--muted); font: 11px var(--sans); }
.assist-foot a, .assist-actions a, a.assist-why { color: var(--muted); cursor: pointer; }
.assist-foot a:hover, .assist-actions a:hover, a.assist-why:hover { color: var(--violet); text-decoration: underline; }

/* A suggested command, or a plan's steps. */
.assist-chips, .assist-plan { margin: 4px 0 8px; }
.assist-plan-head { display: flex; gap: 12px; color: var(--muted); font: 11px var(--sans); margin-bottom: 2px; }
.assist-plan-head a { color: var(--violet); cursor: pointer; }
.assist-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 3px 6px;
  border-radius: var(--radius);
}
.assist-step:hover { background: var(--chrome); }
.assist-step code {
  font: 12px/1.5 var(--mono);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: white;
  color: var(--strong);
  white-space: pre-wrap;
  cursor: text;
}
.assist-step .badge { font: 11px var(--sans); color: var(--blue); }
.assist-step .badge.failed { color: var(--red); }
.assist-checked { font: 11px var(--sans); color: var(--green); padding: 2px 8px 4px; white-space: pre-wrap; }
.assist-checked.failed { color: var(--red); }
.assist-step button.small { height: 20px; padding: 0 7px; font-size: 11px; }
.assist-step .note { flex-basis: 100%; padding-left: 22px; color: var(--muted); font: 12px var(--sans); }
.assist-step .mark { width: 14px; color: var(--green); text-align: center; }
.assist-chips .mark { display: none; }
.assist-plan .assist-step .mark::before { content: "○"; color: var(--muted); }
.assist-plan .assist-step.done .mark::before { content: "✓"; color: var(--green); }

/* "explain" and "next?" on any entry, while the pointer is over it. */
.assist-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  gap: 10px;
  padding: 0 4px;
  background: var(--surface);
  font: 11px var(--sans);
}
.entry:hover > .assist-actions { display: flex; }
a.assist-why { float: right; margin-left: 12px; font: 11px var(--sans); }