/* WORK JOBS (js/jobs.js, 2026-11-02): a worker agent's queue, a job's page, a customer's folder, the work
   permissions, GitHub repo links, usage, and the flows builder's run_job step and hooks. Calm by design: one accent
   for what needs a person (the approval card), green for running, the danger colour only for a failure's reason.
   Every colour is a token, so the four themes and Night work as they are. Phones: section 3. */

/* ------------------------------------------------------------------ 1. shared pieces */

/* The side panel's body is a flex column: nothing on these pages may shrink under its content. */
.side-body:is([data-view='jobs'], [data-view='job'], [data-view='folder'], [data-view='job-new'], [data-view='work-perms'], [data-view='github'], [data-view='usage']) > * { flex-shrink: 0; }

.jb-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; }
.jb-h h2 { flex: 1; min-width: 180px; }
.jb-h-face { display: inline-flex; }
.jb-h-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.jb-intro { max-width: 680px; margin-bottom: 4px; }
.jb-path { font-size: 11px; overflow-wrap: anywhere; color: var(--ink-2); }
/* Small hints are --ink-3 across the app; on these pages they carry rules people act on (who sees a folder, why a
   button is off), so they get the darker --ink-2. Scoped here: the rest of the app keeps its own. */
.side-body:is([data-view='jobs'], [data-view='job'], [data-view='folder'], [data-view='job-new'], [data-view='work-perms'], [data-view='github'], [data-view='usage']) .sd-hint, .jb-approve .pa-st { color: var(--ink-2); }
/* Why a control is off: one muted line under it, with a lock. */
.jb-lockline { display: flex; gap: 5px; align-items: center; margin: 4px 0; color: var(--ink-2); }
.jb-lockline svg { flex: none; }
/* The trigger's kill switch, said where a flow's status and its run_job steps show. */
.jb-off-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.fl-meta .jb-off-badge { margin: 0 6px 0 0; }
/* Cancel, armed by a first click: the second one cancels. */
.btn.armed { background: var(--danger); border-color: var(--danger); color: var(--card); }
.jb-ownerface { width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: calc(var(--s) * 0.42); font-weight: 600; color: var(--card); background: var(--ink-2); }

.jb-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); }
.jb-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.jb-st.st-running { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.jb-st.st-running i { background: var(--ok); animation: jb-pulse 1.6s ease-in-out infinite; }
.jb-st.st-queued i { background: var(--accent); }
.jb-st.st-done i { background: var(--ok); }
.jb-st.st-failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.jb-st.st-failed i { background: var(--danger); }
.jb-st.st-held { color: var(--accent-ink); background: var(--accent-soft); }
.jb-st.st-held i { background: var(--accent); }
@keyframes jb-pulse { 50% { opacity: 0.35; } }

.jb-trig, .jb-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-2); padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 5%, transparent); white-space: nowrap; }
.jb-lock { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.jb-lock code { font-size: 10.5px; }
.jb-strip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 2px 0 6px; }

/* A job's row in a queue. */
.jb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.jb-row { display: flex; gap: 10px; align-items: flex-start; width: calc(100% + 12px); margin: 0 -6px; padding: 8px 6px; border: 0; background: transparent; border-radius: 10px; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.jb-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.jb-row.sealed { cursor: default; opacity: 0.85; }
.jb-row.sealed:hover { background: transparent; }
.jb-face { flex: none; display: inline-flex; padding-top: 1px; color: var(--accent-ink); }
.jb-pos { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); }
.jb-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.jb-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.jb-top b { font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-main > small { font-size: 11.5px; color: var(--ink-2); }
.jb-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jb-time { font-size: 11px; color: var(--ink-3); }
.jb-why { display: inline-flex; gap: 5px; align-items: baseline; font-size: 11.5px; color: var(--ink-2); }
.jb-why svg { flex: none; position: relative; top: 1px; }
.jb-why.fail { color: var(--danger); }
.jb-why.lock { color: var(--ok); }
.jb-why.held { color: var(--accent-ink); }
.jb-sec.waiting .jb-row { align-items: flex-start; }
.jb-sec.needs h3, .jb-needs h3 { color: var(--accent-ink); }
.jb-hidden { margin-top: 6px; display: flex; gap: 5px; align-items: center; }

/* "Now": what the agent holds, or that its folder is free. */
.jb-now { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); margin: 6px 0 2px; font-size: 13px; }
.jb-now > svg { color: var(--ok); flex: none; margin-top: 2px; }

/* Facts as label · value rows. */
.jb-facts { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 1px; }
.jb-facts li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.jb-facts li:last-child { border-bottom: 0; }
.jb-facts span { color: var(--ink-3); }
.jb-facts b { font-weight: 500; min-width: 0; }
.jb-who { display: inline-flex; align-items: center; gap: 6px; }

.jb-note, .jb-fail, .jb-plain { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); margin: 6px 0; color: var(--ink-2); line-height: 1.45; }
.jb-note svg, .jb-fail svg, .jb-plain svg { flex: none; margin-top: 2px; }
.jb-note.warn { background: var(--accent-soft); color: var(--accent-ink); }
.jb-note.bad, .jb-fail { background: color-mix(in srgb, var(--danger) 9%, transparent); color: var(--danger); }
.jb-fail b { color: var(--danger); }
.jb-plain svg { color: var(--accent); }

/* The approval card: the one thing on a job's page that waits for a person. */
.jb-approve { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: var(--card); padding: 12px 14px 12px 16px; margin: 8px 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; box-shadow: var(--shadow-sm); }
.jb-approve::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.jb-ap-h { display: flex; align-items: center; gap: 8px; }
.jb-ap-h svg { color: var(--accent); }
.jb-ap-h b { flex: 1; font-size: 14px; }

/* Issue → job → pull request. */
.jb-gh { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.jb-gh > i { align-self: center; color: var(--ink-3); font-style: normal; }
.jb-gh-step { display: flex; gap: 7px; align-items: flex-start; padding: 7px 10px; border-radius: 10px; border: 1px dashed var(--line-2); background: transparent; font: inherit; color: var(--ink); text-align: left; flex: 1 1 160px; min-width: 0; }
button.jb-gh-step { cursor: pointer; }
button.jb-gh-step:hover { border-color: var(--accent); }
.jb-gh-step > svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.jb-gh-step span { display: flex; flex-direction: column; min-width: 0; }
.jb-gh-step b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-gh-step small { font-size: 11px; color: var(--ink-3); overflow-wrap: anywhere; }
.jb-gh-step.done { border-style: solid; border-color: var(--line); background: var(--card); }
.jb-gh-step.done > svg { color: var(--ok); }
.jb-gh-step.now { border-style: solid; border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); background: color-mix(in srgb, var(--ok) 7%, var(--card)); }
.jb-gh-step.now > svg { color: var(--ok); }
.jb-gh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* The prompt, folded. */
.jb-prompt, .jb-tech { margin: 6px 0; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); padding: 8px 11px; font-size: 12.5px; }
.jb-prompt summary { cursor: pointer; font-weight: 500; color: var(--ink-2); }
.jb-prompt p { margin: 6px 0 0; line-height: 1.5; color: var(--ink); }

/* Files: published, delivered, refused. */
.jb-files-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; margin: 8px 0 2px; }
.jb-files-h svg { color: var(--accent); }
.jb-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.jb-files li { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; min-width: 0; }
.jb-files li svg { flex: none; color: var(--ink-3); }
.jb-files code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.jb-files li > span { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.jb-files.refused code { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 50%, transparent); }

/* The timeline. */
.jb-tl { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 0; }
.jb-tl li { display: flex; gap: 10px; position: relative; padding-bottom: 10px; }
.jb-tl li::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 1px; background: var(--line); }
.jb-tl li:last-child::before { display: none; }
.jb-tl-ico { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--ink-3); }
.jb-tl .ev-start .jb-tl-ico, .jb-tl .ev-now .jb-tl-ico, .jb-tl .ev-publish .jb-tl-ico, .jb-tl .ev-publish_approved .jb-tl-ico { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.jb-tl .ev-attach .jb-tl-ico, .jb-tl .ev-publish_pending .jb-tl-ico { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.jb-tl .ev-sweep .jb-tl-ico, .jb-tl .ev-publish_refused .jb-tl-ico, .jb-tl .ev-publish_rejected .jb-tl-ico, .jb-tl .ev-mount_failed .jb-tl-ico { color: var(--danger); }
.jb-tl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.jb-tl-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.jb-tl-top time { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.jb-tl-body small { font-size: 12px; color: var(--ink-2); line-height: 1.4; }

/* The record: the worker's facts, then the agent's own words, set apart. */
.jb-record { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 12.5px; }
.jb-rec-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.jb-rec-h svg { position: relative; top: 2px; color: var(--accent); }
.jb-rec-facts { margin: 4px 0; display: grid; gap: 0; }
.jb-rec-facts div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.jb-rec-facts dt { color: var(--ink-3); }
.jb-rec-facts dd { margin: 0; }
.jb-rec-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); font-weight: 600; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.jb-rec-sub .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.jb-rec-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.jb-rec-files li { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.jb-rec-files code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-rec-files span { color: var(--ink-3); white-space: nowrap; }
.jb-rec-files span.jb-rec-act { color: var(--ink); white-space: normal; }
.jb-own { margin-top: 4px; }
.jb-own blockquote { margin: 4px 0 0; padding: 8px 12px; border-left: 3px solid var(--line-2); background: color-mix(in srgb, var(--ink) 3%, transparent); border-radius: 0 8px 8px 0; color: var(--ink-2); font-style: italic; }
.jb-own blockquote p { margin: 0 0 4px; }
.jb-own blockquote p:last-child { margin: 0; }

.jb-att { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jb-att li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.jb-foot { margin-top: 10px; }

/* Deep pages (a job › its folder › a new job): the oldest crumbs fold into "…" (js/side.js fitCrumbs), and a
   crumb still too long is ellipsised with its full name on hover. The page you are on gives way last. */
.sp-head { position: relative; }
.sp-crumbs li { flex: 0 1 auto; overflow: hidden; }
.sp-crumbs li[hidden] { display: none; }
.sp-crumbs li:first-child, .sp-crumbs .sp-more { flex: none; }
.sp-crumbs li.sp-here { flex: 0 0.25 auto; }
.sp-crumbs li button, .sp-crumbs li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; display: inline-block; vertical-align: middle; }
.sp-crumbs li.sp-here > span { max-width: none; }
.sp-crumbs li:first-child > span { display: inline-flex; }
.sp-crumbs .sp-more button { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 6px; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, transparent); max-width: none; }
.sp-crumbs .sp-more button svg { fill: currentColor; }
.sp-crumbs .sp-more button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.sp-crumbs .sp-more button[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-ink); }
/* Measured at full width, so a fold happens only when the whole trail would not fit. */
.sp-crumbs.measuring li { flex-shrink: 0; }
.sp-crumbs.measuring li button, .sp-crumbs.measuring li > span { max-width: 260px; }
.sp-crumbs.measuring li.sp-here > span { max-width: none; }
.sp-more-menu { top: auto; max-width: min(360px, 80vw); margin: 0; animation: none; }
.sp-more-menu [role=menuitem] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--ink); }

/* ------------------------------------------------------------------ 2. pages */

/* All jobs: the worker agents. */
.jb-agents { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.jb-agent { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.jb-agent:hover { border-color: var(--accent); }
.jb-agent > .jb-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.jb-agent b { font-size: 13px; }
/* Wraps rather than cuts: the end of the line ("+1 you can’t see") matters as much as its start. */
.jb-agent small { font-size: 11.5px; color: var(--ink-3); }
.jb-agent > svg { color: var(--ink-3); }

/* The subscription switch and its warning. */
.jb-sub { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 6px 0; background: var(--card); }
.jb-sub.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.jb-warn { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: var(--ink-2); margin: 4px 0 2px 36px; line-height: 1.45; }
.jb-warn svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.jb-agent-sub + .jb-agent-sub { margin-top: 8px; }
.jb-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jb-members li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.jb-members li:nth-child(odd) { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.jb-m-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.jb-m-who b { font-weight: 500; font-size: 13px; }
.jb-m-who small { font-size: 11.5px; color: var(--ink-3); }
.jb-members select { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--card); color: var(--ink); }
.jb-members li.jb-ov .jb-m-who small { color: var(--accent-ink); }
.jb-sub-h { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 10px 0 4px; display: flex; align-items: center; gap: 6px; }
.jb-sub-h .muted { font-weight: 400; }

/* A customer's folder: three parts side by side where there is room. */
.jb-folders { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 8px 0; }
.jb-fold { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jb-fold h4 { display: flex; align-items: center; gap: 6px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; margin: 0; }
.jb-fold h4 svg { color: var(--accent); }
.jb-fold .jb-files li { flex-wrap: wrap; }
.jb-fold .jb-files li > span { flex-basis: 100%; padding-left: 21px; white-space: normal; }
.jb-work { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jb-work li { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.jb-work li > svg { color: var(--ink-3); flex: none; }
.jb-work li > span { color: var(--ink-2); }
.jb-held { color: var(--ok); font-weight: 600; font-size: 11.5px; }
.jb-who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jb-who-list li { display: grid; grid-template-columns: 12px minmax(140px, 220px) minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 12.5px; padding: 4px 0; }
.jb-who-list b { font-weight: 500; }
.jb-who-list li > span:last-child { color: var(--ink-2); }
.jb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.jb-who-list .jb-yes .jb-dot { background: var(--ok); }
.jb-who-list .jb-part .jb-dot { background: var(--accent); }

/* A job by hand. */
.jb-form { display: grid; gap: 10px; margin-top: 6px; max-width: 680px; }
.jb-form .field { display: flex; flex-direction: column; gap: 4px; }
.jb-form input, .jb-form select, .jb-form textarea { font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--ink); min-width: 0; }
.jb-form textarea { resize: vertical; line-height: 1.45; }
.jb-form input:focus, .jb-form select:focus, .jb-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.jb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jb-form > .btn, .jb-form > .actions { justify-self: start; }
.jb-attach { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; display: grid; gap: 6px; background: var(--card); }
.jb-attach legend { padding: 0 4px; }
.jb-attach ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jb-attach label { display: flex; align-items: center; gap: 9px; padding: 5px 4px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.jb-attach label:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.jb-attach li.off label { cursor: default; opacity: 0.6; }
.jb-attach .jb-tx, .jb-never-list .jb-tx { display: flex; flex-direction: column; min-width: 0; }
.jb-attach small { font-size: 11px; color: var(--ink-3); }
.jb-never { margin-top: 6px; }
.jb-never-list li { display: flex; align-items: center; gap: 9px; padding: 5px 4px; font-size: 12.5px; opacity: 0.75; }
.jb-never-list small { display: inline-flex; align-items: center; gap: 4px; }
.jb-linkform { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding-top: 8px; }

/* GitHub. */
.jb-design { display: inline-block; margin-top: 4px; color: var(--ink-3); font-style: italic; }
.jb-install { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin: 4px 0 6px; font-size: 13px; flex-wrap: wrap; }
.jb-install > span:nth-child(2) { flex: 1; min-width: 200px; }
.jb-link { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; margin: 6px 0; }
.jb-link.paused { opacity: 0.7; }
.jb-link-h { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 2px; }
.jb-link-h b { flex: 1; }

/* Usage. */
.jb-balance { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.jb-balance b { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.jb-uline { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin: 0 0 8px; font-size: 13px; }
.jb-uline > svg { color: var(--accent); flex: none; margin-top: 2px; }
.jb-uline > span { display: flex; flex-direction: column; gap: 3px; }
.jb-uline small { font-size: 11.5px; color: var(--ink-3); }
.jb-hist { list-style: none; margin: 0; padding: 0; display: grid; }
.jb-hist li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); font-size: 12.5px; }
.jb-hist li:not(.jb-hist-job) { grid-template-columns: 120px minmax(0, 1fr) auto; }
.jb-hist-when { color: var(--ink-3); font-size: 11.5px; }
.jb-hist-what { display: flex; flex-direction: column; min-width: 0; }
.jb-hist-what b { font-weight: 500; }
.jb-hist-what small { color: var(--ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-hist-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.jb-hist-n.in { color: var(--ok); }

/* The conversation's card (an agent's or a customer's), under the screen card. */
.jb-chatcard { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 6px 10px 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
button.jb-chatcard:hover { border-color: var(--accent); }
.jb-chatcard > svg:first-child { color: var(--accent); flex: none; }
.jb-chatcard > svg:last-child { color: var(--ink-3); flex: none; }
.jb-chatcard .jb-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.jb-chatcard b { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; }
.jb-chatcard small { font-size: 11.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-chatcard small.jb-cc-n { color: var(--ink-3); }
/* Two halves stacked, not side by side: in the rail's narrow chat the folder half was cut to "data · deliv…". */
.jb-chatcard.two { padding: 0; gap: 0; cursor: default; overflow: hidden; flex-direction: column; align-items: stretch; }
.jb-chatcard.two button { flex: 1; display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 0; background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.jb-chatcard.two button + button { border-top: 1px solid var(--line); }
.jb-chatcard.two button:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.jb-chatcard.two button > svg { color: var(--accent); flex: none; }

/* The flows builder: a webhook flow's hooks, the kill switch, first runs, and the run_job step's preview. */
.jb-hooks { display: grid; gap: 8px; }
.jb-hooks-h { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.jb-kill { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--card); }
.jb-kill:not(.on) { border-color: var(--line); }
.jb-kill.on { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 5%, var(--card)); }
.jb-hook { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); display: grid; gap: 6px; }
.jb-hook.off { opacity: 0.75; }
.jb-hook-h { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.jb-hook-h b { flex: 1; }
.jb-hook .jb-facts li { grid-template-columns: 92px minmax(0, 1fr); font-size: 12px; }
.jb-copyrow { display: flex; gap: 6px; align-items: center; }
.jb-copyrow input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--card-2); color: var(--ink); }
.jb-secret { border-radius: 10px; padding: 10px; background: var(--accent-soft); display: grid; gap: 6px; }
.jb-secret p { margin: 0; }
.jb-secret b { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-ink); }
.jb-secret .jb-copyrow input { background: var(--card); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.jb-secret > .btn { justify-self: start; }
.jb-aps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jb-ap { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); flex-wrap: wrap; }
.jb-ap.pending { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
/* A decided first run steps back with a fainter border, not with opacity: faded text would fall under contrast. */
.jb-ap:not(.pending) { border-color: color-mix(in srgb, var(--ink) 8%, transparent); background: transparent; }
.jb-ap-main { display: flex; flex-direction: column; flex: 1; min-width: 160px; gap: 1px; }
.jb-ap-main b { font-size: 12.5px; font-weight: 600; }
.jb-ap-main small { font-size: 11.5px; color: var(--ink-2); }
.jb-ap-main small.jb-untrusted { color: var(--ink-3); display: inline-flex; gap: 4px; align-items: center; }
.jb-ap-acts { display: flex; gap: 6px; }
.jb-filled p { font-size: 12px; line-height: 1.5; margin: 0; color: var(--ink-2); }
.jb-hookform { border: 1px dashed var(--line-2); border-radius: 12px; padding: 10px; }

/* ?debug=1: what each action would send. */
.jb-debug { margin-top: 12px; border: 1px dashed var(--line-2); border-radius: 10px; padding: 6px 10px; font-size: 11.5px; }
.jb-debug summary { cursor: pointer; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.jb-debug ol { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 6px; }
.jb-debug pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; font-size: 11px; color: var(--ink-2); }

/* ------------------------------------------------------------------ 3. phones */

@media (max-width: 599.98px) {
  /* A phone has room for the back button and the page's own crumb only. */
  .sp-crumbs li:not(:last-child) { display: none; }
  .sp-crumbs li:last-child::before { display: none; }
  .jb-h h2 { min-width: 0; font-size: 18px; }
  .jb-h-acts { width: 100%; }
  .jb-h-acts .btn { min-height: 38px; flex: 1; justify-content: center; }
  .jb-row { padding: 10px 6px; }
  .jb-top { flex-wrap: wrap; row-gap: 3px; }
  .jb-top b { white-space: normal; }
  .jb-facts li { grid-template-columns: 92px minmax(0, 1fr); font-size: 13.5px; }
  .jb-rec-facts div { grid-template-columns: 1fr; gap: 0; padding: 4px 0; }
  .jb-rec-facts dt { font-size: 11.5px; }
  .jb-two { grid-template-columns: 1fr; }
  .jb-form input, .jb-form select, .jb-form textarea { font-size: 16px; }
  .jb-approve .btn, .jb-foot .btn, .jb-secret .btn, .jb-hook .btn { min-height: 40px; }
  .jb-approve .actions .btn { flex: 1; justify-content: center; white-space: nowrap; }
  .jb-approve .actions .btn.primary { flex: 2; }
  /* Outlined, so a ghost button in the header still reads as a button and not as a label. */
  .jb-h-acts .btn.ghost { border: 1px solid var(--line-2); }
  /* The back button gives way to the page's own crumb (styles.css caps it at 250px, most of a phone). */
  .sp-head .sh-back { max-width: 45%; }
  .jb-record { grid-template-columns: minmax(0, 1fr); }
  .jb-who-list li { grid-template-columns: 12px minmax(0, 1fr); }
  .jb-who-list li > span:last-child { grid-column: 2; }
  .jb-hist li, .jb-hist li:not(.jb-hist-job) { grid-template-columns: minmax(0, 1fr) auto; }
  .jb-hist li.jb-hist-job { grid-template-columns: minmax(0, 1fr) auto auto; }
  .jb-hist-when { grid-column: 1 / -1; }
  .jb-gh { flex-direction: column; }
  .jb-gh > i { transform: rotate(90deg); align-self: flex-start; margin-left: 14px; }
  .jb-gh-step { flex: none; }
  .jb-warn { margin-left: 0; }
  .jb-chatcard { width: calc(100% - 16px); margin: 6px 8px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .jb-st.st-running i { animation: none; }
}

/* The conversation's tasks card (presence.js tasksCardHtml): the same card as Jobs, a late count in the late colour. */
.ch-tasks .late { color: var(--danger); }