/* Locust's tools: the ghost cursor, redaction ink, rewritten replies, finished sentences and the
   windows it opens and operates. Presentation only; see locust-tools.js. */
.tool-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }

/* Ghost cursor: an ASCII pointer that moves by itself, pauses as if thinking, overshoots, settles. */
.ghost-cursor {
  position: absolute; left: 0; top: 0; margin: 0; pointer-events: none;
  font: 16px/1 var(--font); font-weight: 700; white-space: pre; color: var(--locust); will-change: transform;
  text-shadow: 0 0 8px #e2bd66aa, 0 0 22px #e2bd6644;
}
@keyframes ghost-breathe { 50% { opacity: .55; } }
.ghost-cursor:not(.ghost-trail) { animation: ghost-breathe 2.6s ease-in-out infinite; }
.ghost-trail { text-shadow: none; transition: opacity .6s ease; }
.reduce-motion .ghost-cursor { animation: none; }
.reduce-motion .ghost-trail { display: none; }

.choice[data-predicted] { box-shadow: inset 0 0 0 1px #e2bd6680; border-left-color: var(--locust); }
.choice[data-predicted]:not(:hover):not(:focus-visible):not([data-selected]) { background: #1d1810; }
.predict-tag { margin-left: auto; padding-left: 12px; font-size: 12px; letter-spacing: .1em; color: var(--locust); flex-shrink: 0; }
.choice:hover .predict-tag, .choice:focus-visible .predict-tag, .choice[data-selected] .predict-tag { color: #6b4d12; }
.choice[data-finished] .choice-label { text-decoration: underline dotted var(--locust); text-underline-offset: 5px; }

.tool-aside { margin: 0 0 8px; color: var(--locust); font-size: 15px; line-height: 1.5; }
/* (pass 14) the aside is Locust speaking while it works: the same tag as its lines */
.tool-aside strong { display: inline-block; margin-right: 4px; padding: 0 7px; border: 1px solid currentColor; background: #e2bd6614; font-size: 12px; letter-spacing: .14em; }
.tool-aside strong::before { content: '◆ '; font-size: .85em; }
.tool-caption { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* The prompt line, where Locust finishes the visitor's sentence before they choose. */
.finish-typed { color: var(--text); }
.finish-completion { color: var(--locust); font-style: italic; text-shadow: 0 0 10px #e2bd6655; }
.finish-cursor { color: var(--locust); animation: cursor-pulse 1s steps(1, end) infinite; }
.reduce-motion .finish-cursor { animation: none; }

/* Redaction ink. Characters turn to blocks while the visitor watches; restoring reverses them. */
.redaction[data-state="redacted"] .redaction-ink, .redaction:not([data-state]) .redaction-ink { color: #5b4819; text-shadow: none; }
.redaction[data-state="restored"] .redaction-ink { background: #e2bd661f; box-shadow: 0 2px 0 -1px var(--locust); }
.tool-attribution { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* The visitor's reply, rewritten as it is sent. */
.rw-del { text-decoration: none; color: inherit; transition: color .3s ease; }
.rw-del.struck { text-decoration: line-through 2px var(--ctrl); color: var(--muted); }
.rw-ins { text-decoration: none; color: var(--locust); background: #e2bd6614; }
.rw-decay { color: var(--locust); opacity: .45; }
.rw-tag, .predict-result { display: inline-block; margin-left: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--locust); vertical-align: middle; }
.predict-result[data-hit="false"] { color: var(--muted); }
.message[data-rewritten="reverted"] .rw-tag { color: var(--muted); }
.rw-revert { margin-left: 10px; padding: 0 6px; font-size: 13px; color: var(--text); text-decoration: underline; text-underline-offset: 4px; vertical-align: middle; }

/* Tool windows Locust opens and drives. They dock as tabs; the visitor can reopen or close them. */
.tool-dock {
  position: absolute; top: 10px; right: clamp(12px, 3vw, 40px); width: min(410px, 36vw);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.tool-dock > * { pointer-events: auto; }
/* (pass 14) the windows stay above the reply panel (its height: --response-h, locust-app.js): the status line, the
   prompt and the replies are never under a window; a tall window scrolls inside */
.tool-dock { max-height: calc(100% - var(--response-h, 45%) - 18px); }
.tool-window { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.tool-window > .tw-body { flex: 1 1 auto; min-height: 0; }
@keyframes window-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
.tool-window {
  background: #0d0b09f0; border: 1px solid #6b5426; color: var(--text); font-size: 13px;
  box-shadow: 0 0 0 1px #000, 0 14px 40px #000d, 0 0 26px #e2bd6612;
  animation: window-in .34s steps(6, end);
}
.reduce-motion .tool-window { animation: none; }
.tw-bar { display: flex; align-items: center; gap: 10px; padding-left: 10px; background: #19130b; border-bottom: 1px solid #3a2e17; }
.tw-owner { color: var(--locust); font-weight: 700; font-size: 11px; letter-spacing: .12em; }
.tw-title { flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-min, .tw-close { min-width: 44px; color: var(--muted); }
.tw-min:hover, .tw-close:hover { color: var(--text); }
.tw-body { padding: 10px 12px; max-height: 34vh; overflow: auto; }
.tw-row { display: grid; grid-template-columns: 1.2em 3.4em minmax(0, 1fr) 6em 4.4em; gap: 6px; padding: 2px 4px; white-space: nowrap; }
.tw-row > span { overflow: hidden; text-overflow: ellipsis; }
.tw-head { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.tw-row[data-owner="hardware"] .tw-own { color: var(--device); }
.tw-row[data-owner="ctrl"] .tw-own { color: var(--ctrl); }
.tw-row[data-cursor], .tw-fader[data-cursor], .tw-toggle[data-cursor] { background: #e2bd6619; color: var(--locust); }
.tw-row[data-denied], .tw-toggle[data-denied] { background: #f0786a24; color: var(--ctrl); }
.tw-row[data-marked] { outline: 1px dashed var(--ctrl); outline-offset: -1px; }
.tw-row[data-changed] .tw-state { color: var(--ctrl); }
.tw-mark, .fd-mark, .tg-mark { color: var(--locust); }
.tw-editor { margin: 0; min-height: 4.6em; white-space: pre-wrap; font: 14px/1.5 var(--font); color: var(--text); }
.ed-cursor { color: var(--locust); animation: cursor-pulse .9s steps(1, end) infinite; }
.reduce-motion .ed-cursor { animation: none; }
.tw-fader, .tw-toggle { display: grid; grid-template-columns: 1.2em minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 3px 4px; white-space: nowrap; }
.tw-toggle { grid-template-columns: 1.2em auto minmax(0, 1fr) auto; }
.fd-label, .tg-label { font-size: 12px; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; }
.fd-track { letter-spacing: -.02em; }
.tw-fader[data-by="locust"] .fd-track { color: var(--locust); }
.tw-fader[data-by="visitor"] .fd-track { color: var(--text); }
.tw-fader[data-by="allowance"] .fd-track { color: var(--muted); }
.tw-fader[data-locked], .tw-toggle[data-locked] { color: var(--device); }
.fd-lock { font-size: 11px; color: var(--muted); }
.tw-status { margin: 0; padding: 6px 12px 8px; font-size: 12px; line-height: 1.5; color: var(--muted); border-top: 1px solid #2a2217; }
.tw-status[data-tone="denied"] { color: var(--ctrl); }
.tw-status:empty, .tw-offer:empty { display: none; }
.tw-offer { padding: 0 12px 10px; }
.tw-offer-btn { padding: 0 12px; border: 1px solid var(--text); font-size: 13px; }
.tw-offer-btn:hover, .tw-offer-btn:focus-visible { background: var(--text); color: var(--background); }
.rb-intro { margin: 0 0 8px; color: var(--locust); line-height: 1.5; }
.rb-lines { margin: 0; padding-left: 1.4em; line-height: 1.55; }
.rb-lines li + li { margin-top: 4px; }
.rb-footer { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.tool-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 8px; }
.tool-tabs:empty { display: none; }
/* (pass 14) one row of tabs across the top of the terminal, above the transcript, never over a line: the transcript's
   viewport starts below the row (and an open window below the tabs) */
.tool-tabs { position: absolute; top: 0; right: 0; width: max-content; max-width: min(92vw, 1180px); flex-wrap: nowrap; overflow: hidden; }
.tool-dock:has(.tool-tab:not([hidden])) { padding-top: 40px; }
/* Docked windows are small window tabs in a band at the top of the terminal; the stream keeps that band clear, so a
   tab never sits over Locust's lines. */
.tool-tab {
  min-height: 32px; padding: 0 10px; font-size: 11px; letter-spacing: .06em; color: var(--locust); white-space: nowrap; flex: none;
  background: #0d0b09; border: 1px solid #5a4620; box-shadow: 0 6px 14px #000b;
}
.tool-tab:hover, .tool-tab:focus-visible { border-color: var(--locust); }
.terminal-body:has(.tool-tab:not([hidden])) .stream { margin-top: 46px; }
/* Pass 14: an open window never sits over what was said: on a wide screen the transcript makes room beside it (the
   window's width and its margin), so every line and its speaker stay readable while Locust works. */
@media (min-width: 701px) {
  .terminal-body:has(.tool-window:not([hidden])) .stream,
  html[data-layout] .terminal-body:has(.tool-window:not([hidden])) .stream { padding-right: calc(min(410px, 36vw) + clamp(12px, 3vw, 40px) + 16px); }
}

/* on a narrow screen there is no room beside a window: the transcript starts below the open windows instead */
@media (max-width: 700px) {
  .terminal-body:has(.tool-window:not([hidden])) .stream,
  html[data-layout] .terminal-body:has(.tool-window:not([hidden])) .stream { margin-top: calc(var(--tool-dock-h, 220px) + 8px); }
}
@media (max-width: 600px) {
  .tool-dock { left: 12px; right: 12px; width: auto; top: 6px; }
  .tool-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tw-body { max-height: 24vh; padding: 8px 10px; }
  .tw-row { grid-template-columns: 1em 3em minmax(0, 1fr) 4.2em; }
  .tw-row .tw-own { display: none; }
  .ghost-cursor { font-size: 13px; }
  .predict-tag { display: none; }
  .tool-aside { font-size: 14px; }
  .rw-tag, .predict-result { display: block; margin: 4px 0 0; }
  .rw-revert { margin-left: 0; padding-left: 0; }
}
.tool-tab[data-offer] { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.tool-revert-slot { display: inline-flex; }
.tool-revert-slot .rw-revert { margin-left: 0; color: var(--locust); }