/* ============================================================================
 * BOX BOX - monitor.css  ·  the live run monitor drawer
 * ----------------------------------------------------------------------------
 * Loaded after style.css (monitor.js appends the link), so this file may only
 * add. Everything it can borrow it borrows: .sectors/.sector for the stage
 * strip, .fact for the counter pills, .btn/.ghost/.iconbtn for controls,
 * .livedot for "this is alive", .ulabel and .mono for the micro-labels. The
 * orange hazard strip at the top is the dock's motif, not a new one - this
 * drawer is the dock opened all the way up.
 *
 * Nothing here animates. Ethan's PC forces prefers-reduced-motion, so the
 * panel earns its liveness from numbers that actually change: the clocks tick
 * and the timeline bars are re-measured every second in monitor.js. That means
 * no transition may be put on .mon-ag-bar - a one-second transition and a
 * one-second repaint would fight, and the bars would crawl behind the truth.
 * ==========================================================================*/

/* ------------------------------------------------------------------ shell - */

/* z-index 70: over the dock (40) and the mobile rail (60), under the confirm
   modal (90) and the toast (95). The drawer is not modal - a run being watched
   must never stop her reading something else. */
.mon {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(540px, 100vw);
  z-index: 70;
  background: var(--bg-2);
  border-left: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  display: flex;
}

/* Motif 1 - the orange hazard strip, same as the dock's. */
.mon::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--hazard-run);
  z-index: 2;
}

.mon-shell {
  display: flex; flex-direction: column;
  width: 100%; min-height: 0;
}

.mon-head {
  flex: none;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mon-head-id { min-width: 0; flex: 1; }
.mon-head-title {
  display: block; margin-top: 3px;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
}
.mon-head .iconbtn { flex: none; font-size: 15px; }

.mon-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 16px calc(28px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.mon-empty { text-align: center; padding: 54px 18px; }
.mon-empty-big { font-size: 15px; font-weight: 700; margin-bottom: 7px; }

.mon-err { margin: 0 0 12px; }

.mon-list { display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------------------------------------- run cards - */

.mon-run {
  background: var(--surface);
  border: 1px solid var(--line-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* The focused run wears the same accent left edge the active library row does,
   so "this is the one I am looking at" means the same thing in both panes. */
.mon-run.is-on {
  border-color: var(--line-2);
  box-shadow: inset 2px 0 0 var(--accent);
}

.mon-run-pick {
  display: block; width: 100%; text-align: left;
  appearance: none; background: none; border: none;
  color: inherit; font: inherit;
  padding: 12px 14px 11px;
  cursor: pointer;
}
.mon-run-pick:hover { background: var(--surface-2); }

.mon-run-l1 { display: flex; align-items: center; gap: 7px; }
.mon-run-title {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mon-run-clock { flex: none; font-size: 11.5px; color: var(--muted); }

.mon-run-l2 { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.mon-run-where {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mon-chip {
  flex: none;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--line-2); color: var(--muted);
  text-transform: uppercase; line-height: 1.5;
}
.mon-chip[data-status="running"]   { color: var(--run-text);  border-color: var(--run-line); background: var(--run-tint); }
.mon-chip[data-status="done"]      { color: var(--done-text); border-color: var(--done-line); }
.mon-chip[data-status="failed"],
.mon-chip[data-status="timeout"]   { color: var(--fail-text); border-color: var(--fail-line); }
.mon-chip[data-status="cancelled"] { color: var(--faint); border-style: dashed; }

/* The stage strip is built from spans so it can live inside the card's button
   without invalid markup; style.css sizes them but leaves them inline. */
.mon-run .sectors { margin: 11px 0 2px; }
.mon-run .sector-bar,
.mon-run .sector-name { display: block; }

/* -------------------------------------------------------------- detail - */

/* Hangs under the whole card list, not inside the focused card. Expanded in
   place it is taller than the viewport and the other two runs fall off the
   bottom, which defeats the point of a panel that watches three at once. The
   accent left edge is the same one the focused card wears, so the two read as
   one object even with a card or two between them. */
.mon-detail { margin-top: 12px; }
.mon-run-body {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 13px 14px 14px;
}
.mon-detail-head { display: flex; flex-direction: column; gap: 2px; }
.mon-detail-head .ulabel { display: block; }
.mon-detail-title {
  font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- counters - */

.mon-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.mon-stat { display: inline-flex; align-items: baseline; gap: 6px; }
.mon-stat .ulabel { display: inline; font-size: 8.5px; }
.mon-stat b { font-size: 12px; }
.mon-stat.is-live b, .mon-stat.is-live .ulabel { color: var(--run-text); }
.mon-stat.is-done b, .mon-stat.is-done .ulabel { color: var(--done-text); }
.mon-stat.is-fail b, .mon-stat.is-fail .ulabel { color: var(--fail-text); }
.mon-stat.is-left b, .mon-stat.is-left .ulabel { color: var(--faint); }

/* --------------------------------------------------------------- wrap-up - */

/* The card is ORANGE because the run is dragging - that is the unsettled thing
   it is telling her about. The button inside it is the one filled GREEN button
   anywhere in this panel, because it is the thing she will want at minute
   twenty and it must not be hunted for among five other buttons. Orange says
   "look", green says "press" - which is the whole split the palette is on. */
.mon-wrap {
  border: 1px solid var(--run-line);
  background: var(--run-tint);
  border-radius: var(--radius-lg);
  padding: 13px 13px 12px;
}
.mon-wrap .ulabel.accent { color: var(--run-text); }
.mon-wrap-btn { font-size: 14px; padding: 11px 16px; }
.mon-wrap-why { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--run-ink); }
.mon-wrap-slow { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

.mon-wrap-head { display: flex; align-items: center; gap: 7px; }
.mon-wrap-head .ulabel { display: inline; }
.mon-wrap-ago { margin-top: 5px; font-size: 11px; color: var(--muted); }

/* ---------------------------------------------------------------- cancel - */

/* Deliberately the quietest thing in the panel, and deliberately at the very
   bottom of the card: it is one careless click from losing the whole dossier. */
.mon-danger { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mon-cancel-btn { color: var(--faint); flex: none; }
.mon-cancel-btn:hover { color: var(--fail-text); background: var(--fail-tint-2); }
.mon-cancel-what { font-size: 11px; color: var(--faint); }

/* Motif 2 - the red hazard strip, on a genuinely destructive confirm. */
.mon-confirm {
  position: relative; overflow: hidden;
  width: 100%;
  border: 1px solid var(--fail-line); background: var(--fail-surface);
  border-radius: var(--radius-lg);
  padding: 14px 14px 13px;
}
.mon-confirm::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--hazard-red);
}
.mon-confirm-title { display: block; font-size: 14px; font-weight: 700; }
.mon-confirm-body { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.mon-confirm-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 13px; }

/* -------------------------------------------------------------- sections - */

.mon-sec { display: flex; flex-direction: column; gap: 8px; }
.mon-sec-head { display: flex; align-items: baseline; gap: 8px; }
.mon-sec-head .ulabel { display: inline; }

.mon-quiet { margin: 0; }

/* Every honest caveat in this panel is one of these: the sub-agent blind spot,
   what "left behind" means, the dropped activity rows. Quiet, never hidden. */
.mon-note {
  margin: 0;
  font-size: 11px; line-height: 1.5; color: var(--faint);
}
.mon-note-drop { color: var(--muted); }
.mon-note-final {
  color: var(--muted);
  border-left: 2px solid var(--line-2);
  padding-left: 9px;
}

/* -------------------------------------------------------------- timeline - */

.mon-axis {
  display: flex; justify-content: space-between;
  font-size: 9.5px; color: var(--faint);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}

.mon-gantt { display: flex; flex-direction: column; gap: 9px; }

.mon-ag { display: flex; flex-direction: column; gap: 5px; }
.mon-ag-top { display: flex; align-items: flex-start; gap: 8px; }
.mon-ag-n { flex: none; width: 24px; font-size: 10px; color: var(--faint); padding-top: 1px; }
.mon-ag-id { flex: 1; min-width: 0; }

/* Two lines and no more. A brief is up to 240 characters of model prose and
   twelve of them at full height would bury the timeline it belongs to. */
.mon-ag-brief {
  font-size: 12.5px; line-height: 1.45; color: var(--text);
  overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  max-height: 2.9em;
}
.mon-ag-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 3px; font-size: 10.5px; color: var(--faint);
}
.mon-ag-meta .livedot { width: 5px; height: 5px; }
.mon-ag-type {
  font-size: 9px; padding: 1px 4px; border-radius: 3px;
  border: 1px solid var(--line-3); color: var(--faint); line-height: 1.5;
}
.mon-ag-clock { flex: none; font-size: 11px; color: var(--muted); padding-top: 1px; }

.mon-ag-track {
  position: relative; height: 6px;
  border-radius: 3px; background: var(--line-3);
  overflow: hidden;
}
.mon-ag-bar {
  position: absolute; top: 0; bottom: 0;
  min-width: 3px; border-radius: 3px;
  background: var(--run);
}

.mon-ag[data-status="running"] .mon-ag-state { color: var(--run-text); }
.mon-ag[data-status="running"] .mon-ag-clock { color: var(--run-text); }
/* A brighter tip on the leading edge: it reads as "still going that way"
   without needing a single frame of animation. */
.mon-ag[data-status="running"] .mon-ag-bar {
  background: linear-gradient(90deg, var(--run-soft), var(--run-hi));
  box-shadow: 0 0 6px var(--run-glow);
}

/* Flagged in - the same chequer the finished sector bar wears. */
.mon-ag[data-status="done"] .mon-ag-bar {
  background-color: var(--done);
  background-image: var(--chequer);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}
.mon-ag[data-status="done"] .mon-ag-state { color: var(--done-text); }

.mon-ag[data-status="failed"] .mon-ag-bar { background: var(--fail); }
.mon-ag[data-status="failed"] .mon-ag-state { color: var(--fail-text); }

/* Abandoned is neither success nor failure - the run landed without it, which
   is what wrap-up asks for. Hatched grey says "unfinished" without alarm. */
.mon-ag[data-status="abandoned"] .mon-ag-bar {
  background: repeating-linear-gradient(-60deg, var(--hatch-a) 0 4px, var(--hatch-b) 4px 8px);
}
.mon-ag[data-status="abandoned"] .mon-ag-brief { color: var(--muted); }
.mon-ag[data-status="abandoned"] .mon-ag-state { color: var(--faint); }

/* ------------------------------------------------------------------ feed - */

.mon-feed {
  max-height: 300px; overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.mon-ev {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.45;
}
.mon-ev:last-child { border-bottom: none; }
.mon-ev-at { flex: none; font-size: 9.5px; color: var(--faint); }
.mon-ev-tool { flex: none; font-size: 9.5px; color: var(--run-text); min-width: 62px; }
.mon-ev-text {
  flex: 1; min-width: 0;
  color: var(--muted); overflow-wrap: anywhere;
}
.mon-ev-kind { color: var(--faint); }

.mon-ev[data-kind="agent-start"]  .mon-ev-tool { color: var(--run-text); }
.mon-ev[data-kind="agent-done"]   .mon-ev-tool { color: var(--done-text); }
.mon-ev[data-kind="agent-failed"] .mon-ev-tool { color: var(--fail-text); }
.mon-ev[data-kind="note"]         .mon-ev-tool { color: var(--faint); }
.mon-ev[data-kind="note"]         .mon-ev-text { color: var(--run-text); }

/* ------------------------------------------------------------ responsive - */

/* Full screen on a phone. She reads this on a phone more than anywhere else,
   and a 540px drawer on a 390px screen is a drawer with nothing behind it. */
@media (max-width: 600px) {
  .mon { left: 0; width: 100%; border-left: none; }
  .mon-head { padding: 15px 14px 12px; }
  .mon-scroll { padding: 12px 12px calc(26px + env(safe-area-inset-bottom)); }
  .mon-run-pick { padding: 11px 12px 10px; }
  .mon-run-body { padding: 12px; }
  .mon-feed { max-height: 240px; }
  .mon-ev-tool { min-width: 0; }
  /* The stage names collapse first - the bars still carry the progress. */
  .mon-run .sector-name { display: none; }
}