/* agent screens: Run agent + Jobs — design/canvas/Console-Instance-Agent.dc.html,
   Console-Instance-Jobs.dc.html and design/STYLE.md. Shared components are in /app.css. */

.ag, .ag-jobs { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ag .mono, .ag-jobs .mono { font-family: var(--mono); font-size: 13px; }
.ag .hint, .ag-jobs .hint { margin: 0; }

/* ---------- shared bits: segmented control, switch, fields ---------- */
.ag-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; max-width: 100%; }
.ag-seg button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 500; }
.ag-seg button:hover { background: var(--raised); color: var(--text); }
.ag-seg button[aria-checked="true"] { background: var(--raised); color: var(--text); font-weight: 600; }
.ag-seg .n { font: 400 12px var(--mono); color: var(--muted); }

button.ag-switch { flex: none; width: 40px; min-height: 0; height: 24px; padding: 2px; border-radius: 999px; background: var(--line-2); border: 1px solid var(--line-3); justify-content: flex-start; }
.ag-switch > span { width: 18px; height: 18px; border-radius: 50%; background: var(--muted); display: block; transition: transform 0.15s; }
.ag-switch:hover { background: var(--line-3); }
.ag-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.ag-switch[aria-checked="true"] > span { background: var(--accent-ink); transform: translateX(16px); }
button.ag-switch.ag-sw-sm { width: 36px; height: 22px; }
button.ag-switch.ag-sw-sm > span { width: 16px; height: 16px; }
.ag-switch.ag-sw-sm[aria-checked="true"] > span { transform: translateX(14px); }

.ag-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ag-field > label, .ag-lbl { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); }
.ag-field input, .ag-field select { width: 100%; }
.ag-field input.mono { font-size: 13px; }
.ag-link { min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--accent-text); font-size: 13px; font-weight: 500; }
.ag-link:hover { background: none; color: var(--accent-text-2); text-decoration: underline; }
.ag-kind { display: inline-block; font: 12px var(--mono); color: var(--text-2); border: 1px solid var(--line-3); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

/* ---------- composer ---------- */
.ag-comp { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.ag-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ag-login { margin: 0; font-size: 13px; color: var(--muted); }
.ag-login.warn { color: var(--warn); }
.ag-login code { font-size: 12px; }
#ag-prompt { min-height: 132px; padding: 12px 14px; font: 15px/1.6 var(--sans); }
.ag-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 20px; align-items: start; }
.ag-sess { display: flex; flex-direction: column; gap: 6px; }
.ag-sess-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ag-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px 0 12px; background: var(--raised); border: 1px solid var(--line-3); border-radius: var(--r); max-width: 100%; }
.ag-chip .k { font-size: 13px; color: var(--text-2); }
.ag-chip .mono { color: var(--text); }
.ag-chip-x { width: 30px; min-height: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; color: var(--text-2); }

.ag-adv { border-top: 1px solid var(--line); padding-top: 16px; }
.ag-adv > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-weight: 600; color: var(--text); border-radius: 6px; }
.ag-adv > summary::-webkit-details-marker { display: none; }
.ag-adv > summary svg { transform: rotate(-90deg); transition: transform 0.15s; }
.ag-adv[open] > summary svg { transform: none; }
.ag-adv-in { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 28px; align-items: start; }
.ag-toggle { display: flex; gap: 12px; align-items: flex-start; }
.ag-toggle .ag-switch { margin-top: 1px; }
.ag-toggle > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-tl { font-weight: 500; color: var(--text); }
.ag-state { font-weight: 400; color: var(--muted); }
.ag-th { font-size: 13px; color: var(--body); }
.ag-field input.ag-num { max-width: 160px; }

.ag-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border-top: 1px solid var(--line); padding-top: 20px; }
.ag-go { gap: 10px; }
.ag-go.busy:disabled { opacity: 1; background: var(--warn-line); border-color: var(--warn-line); color: var(--text); }
.ag-kbd { display: inline-flex; gap: 3px; }
.ag-kbd kbd { font: 500 11px var(--mono); padding: 2px 5px; border-radius: 4px; background: rgba(13, 16, 20, 0.14); }

/* ---------- output ---------- */
.ag-out { background: var(--well); border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; min-width: 0; }
.ag-out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.ag-out-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.ag-out-l h2 { margin: 0; font-size: 16px; }
.ag-jobinfo { display: contents; }
.ag-jobinfo a { font-size: 13px; font-weight: 500; }
.ag-out-r { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.ag-pill { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--mono); color: var(--text); background: var(--raised); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.ag-pill .dot, .ag-live .dot, .ag-livenote .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: var(--ok); }
.ag-pill.running .dot { animation: pulse 1.2s infinite; }
.ag-pill.timeout .dot, .ag-pill.lost .dot, .ag-pill.nz .dot { background: var(--warn); }
.ag-pill.failed .dot { background: var(--bad); }
.ag-pill.canceled .dot { background: var(--faint); }
.ag-live { display: flex; align-items: center; gap: 10px; padding: 10px 20px 14px 70px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.ag-live[hidden] { display: none; }
.ag-live .dot { background: var(--warn); animation: pulse 1.2s infinite; }
.ag-idle { padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--muted); }
.ag-idle p { margin: 0; }
.ag-idle .a { font-size: 15px; color: var(--text); }
.ag-idle .b { font-size: 14px; max-width: 420px; }

/* the event log (Run agent output and Jobs events) */
.ag-log { padding: 6px 0 8px; display: flex; flex-direction: column; max-height: 72vh; overflow: auto; overscroll-behavior: contain; }
.ag-log > * { flex-shrink: 0; }
.ev { display: flex; gap: 14px; align-items: center; padding: 6px 20px; min-width: 0; }
.ev-t { flex: none; width: 36px; font: 12px var(--mono); color: var(--muted); }
.ev-ic { flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--accent-text); }
.ev-ic .mono { font-weight: 500; color: var(--accent-text); }
.ev-tag { display: none; }
.ev-body { flex: 1; min-width: 0; }
.ev-meta { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.ev-meta:empty { display: none; }
.ev .good { color: var(--ok-text); }
.ev .bad, .ag-detail .bad { color: var(--bad); }
.ev .pending { color: var(--warn); }
.ev.text, .ev.fold { align-items: flex-start; }
.ev.text { padding-top: 8px; padding-bottom: 8px; }
.ev.text .ev-t { padding-top: 3px; }
.ev.text p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); max-width: 760px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ev.tool .ev-body > .mono { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-name { color: var(--text); font-weight: 500; }
.ev .args { color: var(--text-2); }
.ev.sys .ev-body, .ev.raw .ev-body { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ev.sys .ev-body .mono, .ev.raw .ev-body .mono { font-size: 12px; }
.ev.sys.bad .ev-body { color: var(--bad); }
.ev.err .ev-body { color: var(--bad); overflow-wrap: anywhere; white-space: pre-wrap; }
.ev.raw { align-items: flex-start; }
.ev-fold { width: 100%; min-height: 28px; padding: 0; border: 0; background: none; justify-content: flex-start; gap: 8px; text-align: left; font-style: italic; color: var(--muted); }
.ev-fold:hover { background: none; color: var(--text); }
.ev-fold svg { flex: none; transition: transform 0.15s; }
.ev-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
.ev-fold .l { flex: none; font-size: 14px; }
.ev-fold .p { min-width: 0; font-size: 13px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-foldtext { margin: 0 20px 8px 70px; font-size: 13px; font-style: italic; color: var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-out { margin: 2px 20px 8px 110px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ev-out pre { margin: 0; font: 13px/1.6 var(--mono); color: var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-out pre[hidden] { display: none; }
.ev-out.bad pre { color: #f3a3a3; }
.ev-more { align-self: flex-start; display: inline-flex; gap: 4px; min-height: 28px; padding: 0; border: 0; background: none; color: var(--text-2); font-size: 13px; }
.ev-more:hover { background: none; color: var(--text); }
.ev-pipe { display: flex; gap: 14px; align-items: flex-start; padding: 6px 20px; }
.ev-pipe .ev-t { padding-top: 2px; }
.ev-pipe pre { flex: 1; min-width: 0; margin: 0; font: 13px/1.6 var(--mono); color: var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-pipe.stderr pre { color: var(--bad); }
.ev-metabar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 20px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.ev-metabar .k { color: var(--text-2); }
.ev-metabar .copy { border-color: transparent; }
.ev-card { margin: 14px 20px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; }
.ev-card-in { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.ev-card .ttl { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 17px var(--display); color: var(--text); }
.ev-card .ttl svg { flex: none; color: var(--ok); }
.ev-card.bad .ttl svg { color: var(--bad); }
.ev-card .txt { margin-left: 30px; font-size: 14px; color: var(--text-2); max-width: 760px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 20px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--muted); }
.ev-card-foot .mono { font-size: 12px; }
.ag-by, .ag-next { font-family: var(--sans); }
.ag-next { font-size: 13px; }

/* compact log in the Jobs detail: tags instead of icons */
.ag-log.compact { background: var(--well); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 0; max-height: 640px; }
.ag-log.compact .ev, .ag-log.compact .ev-pipe { gap: 12px; padding: 6px 16px; align-items: baseline; }
.ag-log.compact .ev-t { width: 34px; padding-top: 0; }
.ag-log.compact .ev-ic, .ag-log.compact .ev-name, .ag-log.compact .ev-fold .l { display: none; }
.ag-log.compact .ev-tag { display: block; flex: none; width: 58px; font: 500 12px var(--mono); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-log.compact .ev.tool .ev-tag { color: var(--accent-text); }
.ag-log.compact .ev.sys .ev-tag, .ag-log.compact .ev.raw .ev-tag { color: var(--muted); }
.ag-log.compact .ev.err .ev-tag, .ag-log.compact .ev.sys.bad .ev-tag, .ag-log.compact .ev-pipe.stderr .ev-tag { color: var(--bad); }
.ag-log.compact .ev-pipe .ev-tag { color: var(--muted); }
.ag-log.compact .ev.text p { font-size: 14px; line-height: 1.5; }
.ag-log.compact .ev-out { margin: 2px 16px 8px 108px; }
.ag-log.compact .ev-foldtext { margin: 0 16px 8px 108px; }
.ag-log.compact .ev-metabar { padding: 4px 16px 10px; }
.ag-log.compact .ev-card { margin: 10px 16px; }
.ag-log.compact .ev-card-in { padding: 14px 16px; }
.ag-log.compact .ev-card .ttl { font-size: 15px; }
.ag-noev { padding: 10px 16px; }

/* ---------- jobs ---------- */
.ag-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.ag-bar[hidden] { display: none; }
.ag-bar-l { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; min-width: 0; }
.ag-inline { display: flex; align-items: center; gap: 10px; }
.ag-inline label { display: block; font-size: 13px; color: var(--text-2); }
.ag-inline select { min-width: 140px; }
.ag-table { min-width: 960px; }
.ag-table td { height: 52px; padding-top: 0; padding-bottom: 0; }
.ag-table tr.sel td { background: var(--raised); }
.ag-jid { color: var(--text); }
.ag-cmd { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ag-cmd.mono { font-size: 13px; }
.ag-when { color: var(--text-2); white-space: nowrap; }
.ag-table td.num { color: var(--text-2); white-space: nowrap; }
.ag-table th.num { font-family: var(--sans); font-size: 12px; }

.badge.ag-st { color: var(--text); }
.badge.ag-st .code { font-family: var(--mono); color: var(--muted); }
.badge.ag-st.nz::before, .badge.ag-st.timeout::before { background: var(--warn); animation: none; }
.badge.ag-st.lost::before { background: var(--bad); }
.badge.ag-st.canceled::before { background: var(--faint); }
.badge.ag-st.failed, .badge.ag-st.timeout { color: var(--text); }

.ag-empty { padding: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ag-empty .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--raised); display: flex; align-items: center; justify-content: center; color: var(--accent-text); }
.ag-empty h2 { margin: 4px 0 0; font-size: 20px; }
.ag-empty p { margin: 0; max-width: 460px; font-size: 15px; color: var(--body); }
.ag-empty .row { margin-top: 8px; justify-content: center; }

.ag-detail { padding: 24px; display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 16px; }
.ag-dh { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.ag-dh-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ag-dh-l h2, .ag-dh-l h2.mono { margin: 0; font: 500 18px var(--mono); }
.ag-dh-l .row { gap: 8px 12px; }
.ag-dh-p { margin: 0; font-size: 15px; color: var(--text-2); overflow-wrap: anywhere; }
.ag-dh-p.mono { font-size: 13px; }
.ag-dbody { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-start; }
.ag-dleft { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.ag-dright { flex: 1.5 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ag-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 20px; }
.ag-facts .wide { grid-column: 1 / -1; }
.ag-facts dt { font-size: 13px; color: var(--muted); }
.ag-facts dd { margin: 2px 0 0; color: var(--text); overflow-wrap: anywhere; }
.ag-sessdd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px !important; }
.ag-sessdd .hint { flex-basis: 100%; }
.ag-sid { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ag-sid .mono { word-break: break-all; }
.ag-sid .copy { border-color: transparent; }
.ag-iobox { display: flex; flex-direction: column; gap: 10px; }
.ag-iobox h3, .ag-evhead h3 { margin: 0; font: 600 14px var(--sans); }
#agj-io { display: flex; flex-direction: column; gap: 10px; }
.ag-io { display: flex; flex-direction: column; gap: 4px; }
.ag-io .lbl { font: 12px var(--mono); color: var(--muted); }
.ag-io pre { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font: 13px/1.6 var(--mono); color: var(--body); white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }
.ag-io pre.none { color: var(--muted); }
.ag-io pre.bad { color: var(--bad); }
.ag-evhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ag-livenote { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ag-livenote .dot { background: var(--faint); }
.ag-livenote .dot.on { background: var(--warn); animation: pulse 1.2s infinite; }

@media (max-width: 860px) {
  .ag-comp, .ag-detail { padding: 18px 16px; }
  .ag-seg button { min-height: 40px; }
  .ag-out-head { padding: 12px 16px; }
  .ev, .ev-pipe { padding-left: 12px; padding-right: 12px; gap: 10px; }
  .ev-t { width: 32px; }
  .ev-out { margin: 2px 12px 8px 12px; }
  .ev-foldtext { margin: 0 12px 8px 12px; }
  .ev-metabar { padding: 4px 12px 10px; }
  .ev-card { margin: 12px; }
  .ev-card .txt { margin-left: 0; }
  .ag-live { padding-left: 16px; }
  .ag-log.compact .ev, .ag-log.compact .ev-pipe { padding: 6px 10px; gap: 8px; }
  .ag-log.compact .ev-out, .ag-log.compact .ev-foldtext { margin: 2px 10px 8px 10px; }
  .ag-dleft, .ag-dright { flex-basis: 100%; }
  .ag-chip-x, .ag-link { min-height: 44px; }
  .ag-kbd { display: none; } /* Ctrl+Enter is a keyboard hint; phones have none */
}