:root {
  --bg: #fbfbfa; --panel: #ffffff; --ink: #1c1b1a; --muted: #6b6864;
  --line: #e4e2de; --accent: #3b5bdb; --ok: #2f9e44; --warn: #e8a13a;
  --bad: #d9480f; --code: #f4f3f1;
  --radius: 10px;
  /* How wide the conversation may grow. Full width: a fixed 880px left two
     inches of empty margin either side on a large display. */
  --content-max: 100%;
  color-scheme: light dark;
}
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {}
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181a; --panel: #1f2023; --ink: #e8e6e3; --muted: #9a958e;
    --line: #2e3034; --accent: #7a95ff; --ok: #51cf66; --warn: #ffc078;
    --bad: #ff8787; --code: #26282c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.55 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}
#app { display: flex; flex-direction: column; height: 100vh; }
#app[hidden] { display: none; }

#signin { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
#signin[hidden] { display: none; }
#signin-form {
  width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
#signin h1 { margin: 0; font-size: 20px; }
#signin p { margin: 0; color: var(--muted); }
#signin pre { margin: 0; padding: 8px 10px; background: var(--code); border-radius: 6px; overflow-x: auto; }
#signin button {
  font: inherit; font-weight: 600; padding: 10px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer;
}
#signin button:disabled { opacity: 0.6; cursor: default; }
#signin button[hidden], #signin p[hidden] { display: none; }
#signin .signin-error { color: var(--bad); }
#signin .signin-note { font-size: 13px; }

.pill { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); }
.pill.ok { color: var(--ok); } .pill.warn { color: var(--warn); } .pill.bad { color: var(--bad); }

/* Rail beside everything else, header above both. */
.shell { flex: 1; display: flex; min-height: 0; overflow: hidden; }
main { flex: 1; overflow: hidden; min-width: 0; }
/* One view fills the main area now, and the workbench manages its own
   scrolling -- `overflow: auto` here would give the page a second scrollbar. */
.tab { display: none; height: 100%; overflow: hidden; flex-direction: column; }
.tab.active { display: flex; flex-direction: column; }

/* chat */
.transcript { flex: 1; overflow-y: auto; padding: 18px 16px 6px; }
/* The last reply ends close to what is under it: the working line or the box. */
.transcript > .turn:last-child { margin-bottom: 4px; }
.turn { max-width: var(--content-max); margin: 0 auto 20px; }
.turn .meta {
  font-size: 12px; color: var(--muted); margin-bottom: 6px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.turn .who { font-weight: 600; color: var(--ink); }
.turn .body { white-space: pre-wrap; word-break: break-word; }

/* Agent prose, rendered from markdown. Spacing is tight on purpose: this is
   a conversation, not a document, and a heading's usual margins would push
   the answer off the screen it is answering on. */
.md { white-space: normal; line-height: 1.5; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  margin: 14px 0 6px; line-height: 1.3; font-weight: 600; color: var(--ink);
}
.md h1 { font-size: 1.3em; }
.md h2 { font-size: 1.15em; }
.md h3 { font-size: 1.05em; }
.md h4, .md h5, .md h6 { font-size: 1em; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md li > ul, .md li > ol, .md li > p { margin: 2px 0; }
.md code {
  font-family: ui-monospace, monospace; font-size: 0.9em;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
}
.md pre.md-code {
  margin: 0 0 10px; padding: 10px 12px; overflow-x: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  white-space: pre; line-height: 1.45;
}
.md pre.md-code code { background: none; border: 0; padding: 0; font-size: 13px; }
.md blockquote {
  margin: 0 0 8px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--line); color: var(--muted);
}
.md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.md a { color: var(--accent, #58a6ff); text-decoration: none; }
.md a:hover { text-decoration: underline; }
.md .md-table { overflow-x: auto; margin: 0 0 10px; }
/* Words break at spaces here, never mid-word: a column squeezed until "2696"
   splits in two is worse than a table that scrolls sideways. */
.md table { border-collapse: collapse; font-size: 0.95em; word-break: normal; overflow-wrap: normal; }
.md th { white-space: nowrap; }
.md th, .md td {
  border: 1px solid var(--line); padding: 5px 10px; text-align: left; vertical-align: top;
}
.md th { background: var(--panel); font-weight: 600; }
/*
 * Who said what, at a glance: you on the right in a solid blue bubble, as
 * iMessage does; agents on the left, full width -- their replies carry tables
 * and code that a bubble would squeeze -- under a clear edge. Automated
 * prompts sit centred and quiet between them.
 */
.turn.user { display: flex; flex-direction: column; align-items: flex-end; }
.turn.user .body {
  background: #1f7aec; color: #fff; border: 0;
  border-radius: 18px 18px 4px 18px; padding: 9px 14px;
  max-width: min(75%, 1100px); white-space: normal;
}
/* Shown the moment it is sent; full strength once the daemon has it (sendingEcho). */
.turn.user.sending { opacity: .6; }
.turn.user .body.md a { color: #fff; text-decoration: underline; }
.turn.user .body.md code { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
.turn.user .body.md pre.md-code { background: rgba(0,0,0,.22); border-color: transparent; }
.turn.user .body.md pre.md-code code { background: none; }
.turn.user .body.md th, .turn.user .body.md td { border-color: rgba(255,255,255,.35); }
.turn.user .body.md th { background: rgba(255,255,255,.12); }
.turn.agent { border-left: 3px solid var(--accent); padding-left: 12px; }
.turn.agent .meta .who { color: var(--accent); }

.turn.auto { display: flex; flex-direction: column; align-items: center; margin: 4px auto 14px; }
.turn.auto .autohead {
  display: flex; gap: 6px; align-items: baseline; max-width: 100%;
  background: var(--code); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
}
.turn.auto .autohead:hover { color: var(--ink); }
.turn.auto .autowhat { color: var(--ink); font-weight: 500; white-space: nowrap; }
.turn.auto .autosum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.turn.auto .autobody {
  width: 100%; margin-top: 8px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--panel); border: 1px dashed var(--line); white-space: normal;
}
.tool {
  font-size: 13px; color: var(--muted); border-left: 2px solid var(--line);
  padding: 2px 0 2px 10px; margin: 6px 0;
}
.tool.command { font-family: ui-monospace, monospace; }
.tool .toolname { white-space: nowrap; }
.tool.bad { color: var(--bad); border-color: var(--bad); }
.err { color: var(--bad); }
.warnline { color: var(--warn); font-size: 13px; }

.pending {
  max-width: var(--content-max); margin: 0 auto 12px; padding: 12px 14px;
  border: 1px solid var(--warn); border-radius: var(--radius); background: var(--panel);
}
.pending button { margin-right: 8px; }

form#composer { border-top: 1px solid var(--line); background: var(--panel); padding: 10px 16px 14px; }
/*
 * Composer: the box, then a quiet strip of settings under it.
 *
 * The strip is deliberately understated -- borderless, muted, small. These
 * are six real choices, but they are chosen rarely and read constantly, and
 * chrome that competes with the conversation for attention loses either way.
 */
.controls {
  display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  max-width: var(--content-max); margin: 5px auto 0; padding: 0 2px;
}
.controls select {
  background: none; border: 1px solid transparent; color: var(--muted);
  font-size: 12px; padding: 3px 4px; border-radius: 6px; cursor: pointer;
  max-width: 190px;
}
.controls select:hover { color: var(--fg); background: var(--panel); }
.controls select:focus-visible { border-color: var(--accent); outline: none; }

/*
 * The composer's row, scoped.
 *
 * Unscoped, this centred every `.row` on the page at 880px and bottom-aligned
 * it -- which is why the file tree sat in the middle of its own panel with
 * its carets hanging off the baseline.
 */
#composer .row {
  display: flex; gap: 8px; max-width: var(--content-max); margin: 0 auto; align-items: flex-end;
}
/* Grows with what is typed instead of reserving three rows for one line. */
#prompt {
  resize: none; overflow-y: auto; max-height: 40vh; min-height: 0;
  padding: 10px 12px; line-height: 1.45;
}
/*
 * Folder picker.
 *
 * Opens upward: it hangs off a control at the bottom of the window, and a
 * menu that drops below the viewport is a menu you have to scroll to use.
 */
.folderwrap { position: relative; display: inline-flex; }
.folderwrap[hidden] { display: none; }
.folderbtn {
  background: none; border: 1px solid transparent; color: var(--muted);
  font-size: 12px; padding: 3px 6px; border-radius: 6px; cursor: pointer;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folderbtn:hover { color: var(--fg); background: var(--panel); }
/* A folder open in restricted mode says so where the folder is named. */
.folderbtn.restricted::after { content: ' · restricted'; color: var(--warn, #d29922); }
.folderbtn[aria-expanded="true"] { color: var(--fg); background: var(--panel); }
.folderpop {
  /*
   * Fixed, not absolute: the composer sits inside a panel with
   * `overflow: hidden`, which clipped the menu at the panel's edge. Its
   * coordinates are set when it opens.
   */
  position: fixed; z-index: 40;
  width: 330px; max-height: 340px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}
.folderpop[hidden] { display: none; }
.folderpop .head {
  display: flex; gap: 6px; align-items: center; padding: 7px 8px;
  border-bottom: 1px solid var(--line); flex: none;
}
.folderpop .crumb {
  flex: 1; min-width: 0; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl;
  text-align: left;
}
.folderpop .dirs { overflow-y: auto; flex: 1; padding: 4px 0; }
.folderpop .dirs .row {
  padding: 5px 10px; cursor: pointer; font-size: 13px;
  display: flex; gap: 6px; align-items: center;
}
.folderpop .dirs .row:hover { background: var(--bg); }
.folderpop .foot {
  padding: 7px 8px; border-top: 1px solid var(--line); flex: none;
  display: flex; gap: 6px;
}
.folderpop .foot button { flex: 1; padding: 7px; font-size: 13px; cursor: pointer; }
.folderpop .foot button.pill { flex: 0 0 auto; }
.folderpop .head button { flex: none; padding: 2px 8px; cursor: pointer; }

/* Offered above the box, because the box is at the bottom of the window. */
.slashmenu {
  max-width: var(--content-max); margin: 0 auto 6px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}
.slashmenu[hidden] { display: none; }
.slashrow {
  padding: 5px 9px; border-radius: 5px; cursor: pointer; font-size: 13px;
  font-family: var(--mono, ui-monospace, monospace); color: var(--muted);
}
.slashrow.on, .slashrow:hover { background: var(--bg); color: var(--fg); }

/* Pasted files, shown before they are sent so a mis-paste can be removed. */
.attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: var(--content-max); margin: 0 auto 6px; padding: 0 2px;
}
.attachments[hidden] { display: none; }
.attach {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 6px 3px 4px; color: var(--muted); max-width: 220px;
}
.attach img {
  width: 26px; height: 26px; object-fit: cover; border-radius: 4px; flex: none;
}
.attach .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach button {
  flex: none; background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px;
}
.attach button:hover { color: var(--bad); }
.attach.failed { border-color: var(--bad); color: var(--bad); }

/* Vendor-side notices: quieter than output, louder than nothing. */
.noticeline {
  color: var(--muted); font-size: 13px; margin: 4px 0;
  padding-left: 10px; border-left: 2px solid var(--line);
}

/* Reads as one of the settings, not as a form field. */
.toggle {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  color: var(--muted); cursor: pointer; padding: 3px 6px; border-radius: 6px;
}
.toggle:hover { color: var(--fg); background: var(--panel); }
.toggle input { margin: 0; cursor: pointer; }
.toggle:has(input:checked) { color: var(--fg); }

/* An arrow, not a word: the button is never the thing being read. */
#send, #stop {
  flex: none; width: 38px; height: 38px; padding: 0; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
#send[hidden], #stop[hidden] { display: none; }
textarea, input, select {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
textarea { flex: 1; resize: vertical; }
.check { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
button {
  font: inherit; cursor: pointer; border-radius: 8px; padding: 8px 16px;
  /* A button reads as one against its panel: its own edge and a lifted fill, not the hairline of a divider. */
  border: 1px solid color-mix(in srgb, var(--ink) 32%, var(--bg)); background: color-mix(in srgb, var(--ink) 9%, var(--bg)); color: var(--ink);
}
button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 15%, var(--bg)); }
#send { background: var(--accent); color: #fff; border-color: transparent; font-weight: 550; }
button:disabled { opacity: .5; cursor: default; }

/* fleet */
.cards { display: grid; gap: 12px; padding: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.card h3 { margin: 0 0 2px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card .sub { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.bar { height: 7px; background: var(--code); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.bar > i { display: block; height: 100%; background: var(--ok); }
.bar.mid > i { background: var(--warn); } .bar.high > i { background: var(--bad); }
/* A subscription's measured windows: name, bar with a pace mark, percent, reset. */
.pacegrid { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; gap: 2px 8px; align-items: center; margin: 8px 0 4px; }
.pacegrid > .win { grid-column: 1 / -1; margin: -2px 0 4px; }
.pacegrid .pacebar { margin: 0; position: relative; overflow: visible; }
.pacegrid .pacebar > i { border-radius: 999px; }
.pacebar > b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .55; border-radius: 1px; }
.pacename { font-size: 12px; white-space: nowrap; }
.pacepct { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.pacepct.warn { color: var(--warn); } .pacepct.err { color: var(--bad); }
.win.warn { color: var(--warn); }
.win { font-size: 13px; color: var(--muted); }

/* lists */
.list { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.item {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 13px; cursor: pointer; display: flex; gap: 12px; align-items: baseline;
}
.item:hover { border-color: var(--accent); }
/* The node strip is informational, not a list of things to click. */
#nodes .item { cursor: default; }
#nodes .item:hover { border-color: var(--line); }
.item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); flex: none; }
.dot.running { background: var(--ok); } .dot.crashed { background: var(--bad); }
.dot.awaiting_permission { background: var(--warn); }
.dot.sched-on { background: var(--accent); } .dot.sched-off { background: transparent; border: 1px solid var(--muted); }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; font-size: 12px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
#usage { padding: 16px; }
/* The subscriptions overview: what a glance from the side panel should answer. */
.ushead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ushead .ustitle { font-weight: 600; flex: 1 1 8em; min-width: 0; }
.ushead .usstamp { display: block; font-weight: 400; }
.ushead button { padding: 2px 8px; font-size: 12px; flex: none; }
.ussection { margin: 14px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ussection:first-child { margin-top: 4px; }
.uspicks { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px 6px; }
.uspicks .ussection { margin: 0 0 4px; }
.uspick { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; font-size: 13px; }
.uspickclass { width: 64px; flex: none; color: var(--muted); }
.uspickwho { min-width: 0; overflow-wrap: anywhere; }
.uspickwho .warn { color: var(--warn); }
.uscard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; }
.uscard.down { opacity: .7; }
.uscardhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.usmeta { margin: 0 0 2px 14px; }
.usgrid { display: grid; grid-template-columns: auto minmax(40px, 1fr) 2.6em 4.6em; gap: 3px 8px; align-items: center; margin: 6px 0 2px; }
.usgrid .pacebar { margin: 0; position: relative; overflow: visible; }
.usreset { text-align: right; white-space: nowrap; }
.plugin-dialog.wide { width: min(980px, calc(100vw - 32px)); }
.usdetails h4:first-child { margin-top: 0; }
h4 { margin: 22px 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* A time beside what happened at it. */
.stamp { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A judge's decision: one card, its reason inside. */
.judgecard { margin: 6px 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.judgecard > summary { color: var(--ink); cursor: pointer; }
.judgecard.nowhy > summary { list-style: none; cursor: default; }
.judgecard.nowhy > summary::-webkit-details-marker { display: none; }
.judgecard .judgemark { margin-right: 6px; color: var(--muted); }
.judgecard .judgewhy { margin-top: 4px; color: var(--muted); }
.judgecard.denied { border-color: var(--warn); }
.judgecard.waiting { border-style: dashed; }
.siderow.agent.finished .label { color: var(--muted); }

/* permission cards */
.permcard { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.permcard:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.permhead { font-weight: 600; margin-bottom: 2px; }
.permactions { margin-top: 8px; display: flex; gap: 8px; }
.permactions button.ok { background: var(--ok); color: #fff; border-color: transparent; }
pre.diff {
  margin: 8px 0 0; padding: 8px 10px; background: var(--code); border-radius: 8px;
  overflow-x: auto; font: 13px/1.45 ui-monospace, monospace; max-height: 320px;
}
pre.diff .dl { white-space: pre; }
pre.diff .add { color: var(--ok); }
pre.diff .del { color: var(--bad); }

/* Stop takes Send's place, at Send's size, while a run is going. */
#stop { background: var(--bad); color: #fff; border-color: transparent; font-size: 15px; line-height: 1; }

.files {
  max-width: var(--content-max); margin: 0 auto 8px; display: flex; gap: 6px;
  flex-wrap: wrap; align-items: center;
}
.files[hidden] { display: none; }
.files .chip {
  font: 12px ui-monospace, monospace; background: var(--code);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px;
}
.filterbar { padding: 16px 16px 0; }
.filterbar input { width: 100%; max-width: 420px; }
/* Under the search box: which conversations, in what state. Quiet, so the box stays the point. */
.filterrow { display: flex; gap: 6px; margin-top: 6px; }
.filterrow .quietselect { max-width: none; padding: 2px 4px; }
#sessions .item.archived .title { color: var(--muted); }
/*
 * Two lines in the narrow explorer: the title has the first to itself, the
 * account, state and any button share the second. On one line the meta text
 * wrapped and squeezed the title out entirely.
 */
#sessions .item { flex-wrap: wrap; row-gap: 2px; align-items: center; }
#sessions .item .title { flex: 1 1 calc(100% - 24px); }
#sessions .item > .win { flex: 1 1 auto; min-width: 0; padding-left: 16px; }
#sessions .item > button { margin-left: auto; }


/* ---------------- open sessions ---------------- */

/*
 * A strip of what is open, not a list of everything that exists.
 *
 * The Sessions tab is the history; this is the handful you are working with
 * right now. Several agents run at once, and flipping between them should cost
 * a click rather than a search.
 */
button.ghost {
  background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink);
  border-radius: var(--radius); padding: 3px 10px; font-size: 13px; cursor: pointer;
}
button.ghost:hover { border-color: var(--ink); }
button.danger.ghost:hover { color: var(--bad); border-color: var(--bad); }
button.ghost:disabled { opacity: 0.4; cursor: default; }

/* ---------------- workbench ---------------- */

/*
 * The side panel, then the editor: groups of tabs, split side by side or
 * stacked however they were dragged. The chat is a tab like the rest.
 */
#workbench { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* The holder of the views' panes while no tab shows them (parkPanes): never on screen. */
.explorer { display: none !important; }

/*
 * Every pane gets the panel's width and scrolls inside it.
 *
 * Fleet and Usage were built for a full window and are dense; in 230px they
 * have to wrap and scroll rather than push the panel wider, or the sash stops
 * meaning anything.
 */
.expane { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.expane[hidden] { display: none; }
/* Cards stack in a narrow panel instead of sitting in a grid. */
.viewdoc .cards { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
.viewdoc .list { padding: 6px 8px; }
.viewdoc .filterbar { padding: 8px 8px 4px; margin: 0; max-width: none; flex: none; }
.viewdoc .filterbar input { width: 100%; max-width: none; }
.viewdoc #usage { padding: 8px; }
.viewdoc .turn, .viewdoc .cards, .viewdoc .list { max-width: none; margin: 0; }
/* A view's tab: its pane fills it and scrolls inside it. */
.docview.viewdoc { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.actbtn {
  position: relative; width: 48px; height: 44px; display: flex;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--muted);
  border-left: 2px solid transparent;
}
.actbtn svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.actbtn:hover { color: var(--fg); }
/* Active means "this view is showing" -- so a collapsed panel shows none. */
.actbtn.active { color: var(--fg); border-left-color: var(--accent); }
.actbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/*
 * Tooltips.
 *
 * Built rather than left to the browser's `title`, which waits about a second
 * and renders as an OS tooltip -- too slow to help someone scanning a column
 * of unlabelled icons, which is exactly when a label is needed.
 */
.actbtn::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  padding: 5px 9px; border-radius: 6px; font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 90ms ease 120ms;
  box-shadow: 0 6px 18px rgb(0 0 0 / 40%); z-index: 50;
}
.actbtn:hover::after, .actbtn:focus-visible::after { opacity: 1; }
/* Changed-file count, the one number worth carrying on the icon itself. */
.actbadge {
  position: absolute; right: 6px; bottom: 6px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 10px; line-height: 15px; text-align: center; font-weight: 600;
}
.actbadge[hidden] { display: none; }

.extitle {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 4px 2px;
}
/* Staged and unstaged, each with the action that moves a file between them. */
.changegroup { margin-bottom: 4px; }
.grouphead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 4px; font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.linkish {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; text-transform: none; letter-spacing: 0; padding: 2px 4px;
}
.linkish:hover { color: var(--accent); text-decoration: underline; }
/* The conversation a watch wakes, inline after "wakes" and left-aligned, not a centered line of its own. */
.watchrow .linkish { display: inline; text-align: left; padding: 0; margin: 0; white-space: normal; }

/* Per-row actions appear on hover: they are for the file under the pointer,
   and showing every one at rest turns a file list into a control panel. */
.rowact {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 5px; opacity: 0; flex: none;
}
.filetree .row:hover .rowact, .rowact:focus-visible { opacity: 1; }
.rowact:hover { color: var(--fg); }
.rowact.danger:hover { color: var(--bad); }
.filetree .row .name { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.commitbox { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 10px; }
.commitmsg {
  width: 100%; resize: vertical; min-height: 42px; padding: 6px 8px;
  font-size: 13px; font-family: inherit;
}
.commitbox button { padding: 6px; font-size: 13px; cursor: pointer; }

/* Caret column keeps file and folder names on the same left edge. */
/*
 * Carets, drawn rather than typed.
 *
 * The glyph characters render at wildly different sizes across fonts and were
 * illegible at the size a tree row wants. A rotated border is the same shape
 * at any zoom and turns to point down when the folder opens.
 */
.filetree .caret {
  width: 16px; height: 16px; flex: none; position: relative;
}
.filetree .row.dir > .caret::before {
  content: ''; position: absolute; left: 4px; top: 50%;
  width: 5px; height: 5px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 90ms ease;
}
.filetree .row.dir.open > .caret::before {
  transform: translate(-1px, -60%) rotate(45deg);
}
.filetree .row:hover .caret::before { border-color: var(--fg); }
.filetree .row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.filetree .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exhead { display: flex; gap: 2px; padding: 6px 8px 0; flex: none; }
.exbtn {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); padding: 5px 9px; font-size: 13px; cursor: pointer;
}
.exbtn:hover { color: var(--fg); }
.exbtn.active { color: var(--fg); border-bottom-color: var(--accent); }

.chatpanel {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
/* Behind another tab of its group. A `display` rule beats the attribute. */
.chatpanel[hidden] { display: none; }
/* Tabs and the panes they belong to, all of it to the right of the side
   panel so opening the panel moves the whole editor rather than half of it. */
.editorarea { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.editorrow { flex: 1; min-height: 0; display: flex; }

/*
 * Groups and splits.
 *
 * A split lays its members out along its direction, each with its share as
 * flex-grow; a group is a strip of tabs over the one thing it shows. The
 * minimums are on the members, not the split, so a stack of three gets a
 * sliver each rather than one of them nothing.
 */
.psplit { display: flex; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.psplit.row { flex-direction: row; }
.psplit.column { flex-direction: column; }
.pgroup {
  display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0;
  overflow: hidden; position: relative;
}
.psplit > .pgroup, .psplit > .psplit { flex: 1 1 0px; }
.gcontent { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.docbox { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.docbox[hidden] { display: none; }
.docview { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }

/* Where a dragged tab would land: the middle joins the group, an edge splits it. */
.dropzone {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: rgb(122 149 255 / 18%); border: 1px solid var(--accent);
  transition: inset 80ms ease;
}
.dropzone[hidden] { display: none; }
.dropzone.left { inset: 0 50% 0 0; }
.dropzone.right { inset: 0 0 0 50%; }
.dropzone.top { inset: 0 0 50% 0; }
.dropzone.bottom { inset: 50% 0 0 0; }

/*
 * The divider between two members of a split, in either direction. As with
 * the side panel's, the line is one pixel and the grab is thirteen.
 */
/* Wider and lighter than the side panel's: at one pixel of border grey the
   join between two groups was easy to miss, and a group boundary is a thing
   you need to see to drag. */
.psash { flex: none; background: color-mix(in srgb, var(--muted) 55%, var(--line)); position: relative; z-index: 15; }
.psash.v { width: 3px; cursor: col-resize; }
.psash.h { height: 3px; cursor: row-resize; }
.psash::before { content: ''; position: absolute; }
.psash.v::before { top: 0; bottom: 0; left: -6px; right: -6px; }
.psash.h::before { left: 0; right: 0; top: -6px; bottom: -6px; }
.psash::after { content: ''; position: absolute; background: transparent; transition: background 90ms ease; }
.psash.v::after { top: 0; bottom: 0; left: -1px; right: -1px; }
.psash.h::after { left: 0; right: 0; top: -1px; bottom: -1px; }
.psash:hover::after, .psash.dragging::after, .psash:focus-visible::after { background: var(--accent); }
.psash:hover, .psash.dragging, .psash:focus-visible { background: var(--accent); outline: none; }
body.sashing-row { user-select: none; cursor: row-resize; }
body.near-divider-row, body.near-divider-row * { cursor: row-resize !important; }


/* Text selection across a drag turns the whole window blue. */
body.sashing { user-select: none; cursor: col-resize; }

/*
 * Held while the pointer is near a divider, released only once it is well
 * clear. Applied to everything so the cursor does not change as the pointer
 * crosses onto the panel or the editor beside it.
 */
body.near-divider, body.near-divider * { cursor: col-resize !important; }

/* Tabs reorder by dragging, like any editor. */
.doctab.dragging { opacity: 0.4; }
.doctab.dropbefore { box-shadow: inset 2px 0 0 var(--accent); }
.doctab.dropafter { box-shadow: inset -2px 0 0 var(--accent); }

.filetree[hidden] { display: none; }
/* As the conversation strip above: a line runs along the strip's foot, and
   the open tab stands 1px lower and covers it in the page's own colour, so
   the tab and what is under it read as one surface. The line is in the
   accent for the group documents open into, and the same accent at half
   strength for the others -- so every open tab is plainly tied to what is
   under it, and the focused one is plainly the focused one. */
.pgroup { --accent-dim: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.doctabs {
  display: flex; gap: 4px; padding: 6px 8px 0; overflow-x: auto; flex: none;
  box-shadow: inset 0 -1px 0 var(--accent-dim);
  scrollbar-width: none;
}
.doctabs::-webkit-scrollbar { display: none; }
.doctabs[hidden] { display: none; }
.pgroup.focused .doctabs { box-shadow: inset 0 -1px 0 var(--accent); }
.doctab {
  display: flex; align-items: center; gap: 7px; flex: none; max-width: 210px;
  padding: 5px 10px; border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--line); border-bottom: none; margin-bottom: 1px;
  background: var(--panel); color: var(--muted); font-size: 13px; cursor: pointer;
}
.doctab:hover { color: var(--fg); }
.doctab.active { color: var(--fg); background: var(--bg); margin-bottom: 0; border-color: var(--accent-dim); }
.pgroup.focused .doctab.active { border-color: var(--accent); }
.doctab .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doctab .x { opacity: 0; font-size: 14px; line-height: 1; }
.doctab:hover .x, .doctab.active .x { opacity: 0.5; }
.doctab .x:hover { opacity: 1; color: var(--bad); }

/* Run controls, in the bar of the file they belong to. */
.sqlrun { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.sqlrun select {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; padding: 2px 4px; border-radius: 5px; max-width: 160px;
}
.sqlrun button { padding: 3px 10px; font-size: 12px; cursor: pointer; }

/* Results: a table that scrolls inside itself rather than widening the pane. */
.sqlscroll { flex: 1; min-height: 0; overflow: auto; }
.sqltable { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
.sqltable th, .sqltable td {
  border-bottom: 1px solid var(--line); padding: 4px 10px; text-align: left;
  white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis;
}
.sqltable th {
  position: sticky; top: 0; background: var(--panel); color: var(--muted);
  font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.sqltable td { font-family: var(--mono, ui-monospace, monospace); }
.sqltable tr:hover td { background: var(--panel); }

/* A terminal: output that scrolls, and one line to type into. */
.termwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.termwrap > .bar {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 5px 10px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.termwrap > .bar > span:first-child { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.termout {
  flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 8px 10px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 13px;
  line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  background: #0b0e13;
}
.xtermhost { flex: 1; min-height: 0; padding: 4px 0 0 8px; background: #0b0e13; overflow: hidden; }
.xtermhost .xterm { height: 100%; }
.termcmd { color: var(--fg); margin-top: 6px; }
.termcmd .sigil { color: var(--accent); }

/* An editable file: a header that says where it stands, then the text. */
.fileedit { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fileedit > .bar {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 5px 10px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.fileedit > .bar > span:first-child {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; direction: rtl; text-align: left;
}
.fileedit > .bar button { padding: 3px 12px; font-size: 12px; cursor: pointer; }
textarea.fileview {
  flex: 1; min-height: 0; width: 100%; resize: none; border: none;
  background: none; color: var(--fg); padding: 10px 12px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 13px;
  line-height: 1.5; white-space: pre; overflow: auto; tab-size: 2;
}
textarea.fileview:focus { outline: none; }

/* The choice, offered where the conflict happened. */
.conflict {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none;
  padding: 7px 10px; font-size: 12px;
  background: color-mix(in srgb, var(--warn, #d29922) 12%, transparent);
  border-bottom: 1px solid var(--line);
}
.conflict .msg { flex: 1; min-width: 200px; color: var(--fg); }
.conflict button { padding: 3px 10px; font-size: 12px; cursor: pointer; }
textarea.fileview[readonly] { color: var(--muted); }

/*
 * Root header: which folder this is, and what you can do to the view of it.
 *
 * The name matters most when several sessions are open on different folders:
 * without it the tree is a list of directories that could be anywhere.
 */
.treehead {
  display: flex; align-items: center; gap: 4px; flex: none;
  padding: 4px 6px 4px 8px; border-bottom: 1px solid var(--line);
}
.treehead .name {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.treehead button {
  flex: none; width: 24px; height: 24px; padding: 0; background: none;
  border: none; border-radius: 4px; cursor: pointer; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.treehead button:hover { color: var(--fg); background: var(--panel); }
.treehead button svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.filetree { flex: 1; overflow: auto; padding: 4px 4px 8px; font-size: 13px; min-height: 0; }
.filetree .row {
  padding: 3px 6px; border-radius: 4px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filetree .row:hover { background: var(--panel); }
.filetree .row.sel { background: var(--panel); color: var(--accent); }
.filetree .row.dir { color: var(--fg); }
.filetree .row.file { color: var(--muted); }
/* The files an agent actually wrote, marked where you are already looking. */
.filetree .row.touched::after { content: ' \25cf'; color: var(--accent); font-size: 10px; }
/* Git status carries its own vocabulary; reusing it beats inventing one. */
.filetree .row .code {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px;
  color: var(--muted); margin-right: 6px;
}
.filetree .row.added .code { color: var(--ok); }
.filetree .row.modified .code { color: var(--warn); }
.filetree .row.deleted .code { color: var(--bad); }

.fileview {
  margin: 0; padding: 12px 16px; overflow: auto;
  font-size: 13px; line-height: 1.55; white-space: pre; tab-size: 2;
}
.fileview .add { color: var(--ok); }
.fileview .del { color: var(--bad); }
.fileview .hunk { color: var(--accent); }
.fileview .meta { color: var(--muted); }

/* The browser view an agent drives: streamed live, and usable by a person. */
.browserview { display: flex; flex-direction: column; height: 100%; }
/* In the panel on the right: it fills the panel, which can be dragged wider for a page. */
.browserpane .browserview { flex: 1; min-height: 0; height: auto; }
.browserview img { max-width: 100%; align-self: flex-start; }
.browserview.live .stage { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.browserview.live .stage img { display: block; width: 100%; height: auto; outline: none; cursor: default; border: 1px solid var(--line); }
.browserview.live .stage img:focus { border-color: var(--accent, #4a8cff); }
.browserview .bar { flex-wrap: wrap; flex: none; min-height: 34px; }
.browserview .bar .lvbtn { flex: none; min-width: 28px; height: 26px; padding: 0 8px; font-size: 14px; line-height: 1; color: var(--ink); background: var(--panel, var(--bg)); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.browserview .bar .lvbtn:hover { border-color: var(--accent, #4a8cff); }
.browserview .bar .addr { height: 26px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 0 8px; }
.browserview .bar .addr { flex: 1 1 160px; min-width: 120px; }
.browserview.live .bar .win { flex-basis: 100%; }
.browserview .bar {
  display: flex; gap: 8px; align-items: center; padding: 6px 10px;
  border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted);
}

/* ---------------- phone ---------------- */

/*
 * One layout, narrowed -- not a second UI.
 *
 * The interactions that matter away from a desk are reading a transcript and
 * answering an approval, so those keep full width and everything that competes
 * with them stacks or shrinks.
 */
@media (max-width: 640px) {
  /* One line at every width: what does not fit goes into the ⋯ menu. */

  /* Thumb-reachable and unambiguous: an approval answered by accident is the
     one mistake this screen must not make easy. */
  .pending button { padding: 12px 16px; font-size: 15px; }

  .cards { grid-template-columns: 1fr; }
  /* A 260px tree beside a file leaves no room for either on a phone, so the
     tree goes full width and the file appears when one is chosen. */
  #pane-files { flex-direction: column; }
  .filetree { width: auto; max-height: 45%; border-right: none;
              border-bottom: 1px solid var(--line); }
  .list, .cards { padding: 12px; }

  /* Below 16px, iOS zooms the page on focus and never zooms back out. */
  textarea, input, select { font-size: 16px; }

  /*
   * The workbench on a phone.
   *
   * Three columns at 390px gives each of them too little to be worth having --
   * measured: explorer 230px, chat 177px, documents 1px. So the explorer
   * becomes an overlay you summon, and every tab, the chat included, shares
   * one group: opening a file moves you to it and the Chat tab brings you back.
   */
  #workbench { position: relative; }



}

/* Keep the composer clear of the home indicator on a home-screen install. */
@supports (padding: max(0px)) {
  form#composer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* schedules */
.schedform { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.schedform[hidden] { display: none; }
.schedform input:not([type=checkbox]), .schedform textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px;
}
.schedform textarea { resize: vertical; }
.schedform label { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.schedform .row, .item.sched .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.item.sched { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.item.sched .schedhead { display: flex; gap: 8px; align-items: center; }
.item.sched .row { margin-top: 4px; }

/* devices pane */
.pairbox[hidden] { display: none; }
.pairbox {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.pairtitle { font-weight: 600; }
#accesslist .audit { padding: 2px 10px; white-space: normal; }

/* terminals pane */
.listhead { font-size: 13px; font-weight: 600; color: var(--muted); padding: 10px 10px 4px; }
.item.agentshell { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.item.agentshell .lastcmd {
  font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.item.agentshell .lastcmd .sigil { color: var(--accent); }
.item.agentshell .lastcmd .bad { color: var(--bad); }
.termcmd .pill { margin-left: 8px; font-size: 12px; }

/* The mode picker, when a send is waiting on a choice. */

/* Composer chips: the settings row as words that open a menu. */
/* A chip's select stays as its source of truth, hidden, wherever the chip sits. */
#composer .native { display: none !important; }
.chip {
  background: none; border: 1px solid transparent; color: var(--ink);
  font: inherit; font-size: 13px; padding: 3px 8px; border-radius: 7px;
  cursor: pointer; white-space: nowrap; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis;
}
.chip[hidden] { display: none; }
.chip:hover, .chip[aria-expanded="true"] { background: var(--code); }
.chip:focus-visible { border-color: var(--accent); outline: none; }
.chip.quiet { color: var(--muted); }
.chip.mode { font-weight: 500; }
.chip.mode.quiet { color: var(--warn); }
.chip.needs { outline: 2px solid var(--warn); outline-offset: 1px; }

.chipmenu {
  position: fixed; z-index: 50; min-width: 240px; max-width: 380px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28); padding: 6px;
}
.chipmenu-title { font-size: 13px; color: var(--muted); padding: 6px 10px 4px; }
.chipmenu-heading {
  font-size: 12px; color: var(--muted); padding: 8px 10px 2px;
  text-transform: uppercase; letter-spacing: .05em;
}
.chipmenu-sep { border-top: 1px solid var(--line); margin: 5px 4px; }
.chipmenu-item {
  display: grid; grid-template-columns: 1fr 18px 14px; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.chipmenu-item.active { background: var(--code); }
.chipmenu-item.disabled { opacity: .45; cursor: default; }
.chipmenu-label { font-size: 14px; color: var(--ink); }
.chipmenu-desc { font-size: 12px; color: var(--muted); margin-top: 1px; }
.chipmenu-check { color: var(--accent); text-align: center; }
.chipmenu-key { font-size: 12px; color: var(--muted); text-align: right; }

/* agents pane */
.agentsfilter { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; font-size: 12px; color: var(--muted); cursor: pointer; }
#agentlist { min-width: 0; }
.item.agentrow { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; overflow: hidden; }
.item.agentrow .schedhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.item.agentrow .title { min-width: 0; }
.item.agentrow .win { overflow-wrap: anywhere; }
.item.agentrow.current { cursor: default; border-color: var(--accent); }

/* A question from an agent: an answer, not allow/deny. */
.permcard.question .questiontext { font-size: 14px; color: var(--ink); margin: 6px 0 8px; white-space: pre-wrap; }
.permcard.question .questionrow { display: flex; gap: 6px; margin-top: 6px; }
.permcard.question .questionreply {
  flex: 1; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
/* A turn opened before its session's history replays holds nothing yet;
   with the agent edge on it, it drew a stray bar at the top. */
.turn.agent:has(> .meta:empty):has(> .body:empty) { display: none; }

/* Composer: add and dictate. */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 7px;
  background: none; color: var(--muted); cursor: pointer;
}
.iconbtn:hover, .iconbtn[aria-expanded="true"] { color: var(--ink); background: var(--bg); border-color: var(--line); }
.iconbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn.caret { width: 18px; }
.iconbtn.caret svg { width: 13px; height: 13px; }
.micgroup { display: inline-flex; }
.micgroup[hidden] { display: none; }
#mic.listening { color: #fff; background: var(--bad); border-color: var(--bad); }

/* Changes pane: one heading per work tree. */
.repohead { display: flex; gap: 8px; align-items: baseline; padding: 10px 10px 2px; border-top: 1px solid var(--line); }
.repohead:first-child { border-top: 0; }
.repohead .reponame { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repoempty { padding: 2px 10px 6px; }
.chipmenu-heading.path { text-transform: none; letter-spacing: 0; font-family: ui-monospace, monospace; }

/* A markdown file, shown rendered. */
.mdview { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px 40px; max-width: 900px; }
.mdview[hidden], textarea.fileview[hidden] { display: none; }

/* The bar above the prompt: machine, folder, branch; what is uncommitted. */
#composer .context {
  display: flex; gap: 2px; align-items: center; flex-wrap: wrap;
  max-width: var(--content-max); margin: 0 auto 6px; padding: 0 2px; min-height: 26px;
}
#composer .context .grow { flex: 1; }
.gitbranch { font-family: ui-monospace, monospace; }
.gitbranch[hidden] { display: none; }
.gitstat { font-family: ui-monospace, monospace; }
.gitstat .add { color: var(--ok); }
.gitstat .del { color: var(--bad); }
#micnote { font-size: 12px; color: var(--warn); padding: 0 6px; }
#micnote[hidden] { display: none; }

/*
 * Until the page has restored the open conversation, the composer would show
 * defaults -- the laptop, the first folder, Any model -- and then change.
 * Instead none of it shows: a small spinner stands where it will be.
 */
#composer.booting > * { display: none !important; }
#composer.booting { display: flex; justify-content: center; align-items: center; min-height: 64px; }
#composer.booting::after {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: composer-spin .8s linear infinite;
}
@keyframes composer-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #composer.booting::after { animation-duration: 2.4s; } }

/* Agents pane: finished ones shown with "show all" are quieter. */
.item.agentrow.old { opacity: .6; }

/* The settings row: add, dictate and autonomy on the left; the rest right. */
.controls .grow { flex: 1; }

/* How full the context is: a ring that fills, and turns amber, then red. */
.ctxring svg { width: 18px; height: 18px; }
.ctxring .track { fill: none; stroke: var(--line); stroke-width: 3; }
.ctxring .fill { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .3s; }
.ctxring.warn .fill { stroke: var(--warn); }
.ctxring.bad .fill { stroke: var(--bad); }
.ctxring[hidden] { display: none; }
.ctxpop { padding: 8px 10px; min-width: 280px; display: flex; flex-direction: column; gap: 8px; }
.ctxpop .line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ctxpop .muted { color: var(--muted); font-size: 12px; }
.ctxpop .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ctxpop .bar i { display: block; height: 100%; background: var(--accent); }
.ctxpop .bar.warn i { background: var(--warn); } .ctxpop .bar.bad i { background: var(--bad); }
.ctxpop button.linkish { align-self: flex-end; }
.ctx-warn { color: var(--warn); } .ctx-bad { color: var(--bad); }

/*
 * The settings row stays one line. What does not fit moves into the ⋯ menu,
 * from the right: the ring, then subscription, effort, model, autonomy.
 */
#composer .controls { flex-wrap: nowrap; overflow: hidden; }
#composer .controls > * { flex: none; }
#composer .controls .grow { flex: 1; min-width: 0; }
#composer .controls .overflowed { display: none !important; }
#moremenu[hidden] { display: none; }

/* A search found an agent, not a conversation: it says so, quietly. */
#sessions .item.agentof .title::before { content: '↳ '; color: var(--muted); }

/*
 * A question's options are answers, not an approval: plain buttons that are
 * easy to read, not white on bright green. Answer is the one highlighted.
 */
.permcard.question .permactions button.ok {
  background: var(--code); color: var(--ink); border: 1px solid var(--line); font-weight: 500;
}
.permcard.question .permactions button.ok:hover { border-color: var(--accent); }
.permcard.question .questionrow button { background: var(--accent); color: #fff; border-color: transparent; }
.permcard.question .judgeclock { margin-top: 8px; }

/* Likely replies: a row of chips above the box, only when there are some. */
.suggestrow {
  display: flex; gap: 6px; flex-wrap: wrap; max-width: var(--content-max); margin: 0 auto 6px; padding: 0 2px;
}
.suggestrow[hidden] { display: none; }
.chip.suggestion {
  border: 1px solid var(--line); background: var(--code); color: var(--ink);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip.suggestion:hover { border-color: var(--accent); }

/* Come and look: a finished reply, or a question waiting. */
.dot.attn-done { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.dot.attn-asking { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 35%, transparent); animation: attn-pulse 1.4s ease-in-out infinite; }
@keyframes attn-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .dot.attn-asking { animation: none; } }
#soundbtn.muted .wave { opacity: 0; }
#soundbtn.muted { opacity: .55; }

/* Hooks, under the schedules. */
.hookshead { display: flex; justify-content: space-between; align-items: center; }
.item.hookrow { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.hookurl { word-break: break-all; }
.hooksecret[hidden], .hooklog[hidden] { display: none; }
.hooksecret { margin-top: 6px; padding: 8px; border: 1px solid var(--warn); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.hooksecret .secretline { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; user-select: all; }
.hooklog { margin-top: 4px; }

/* Tool lines: what ran, click for its output. */
.tool.clickable { cursor: pointer; }
.tool.clickable:hover { color: var(--ink); }
.tool .toolname { color: var(--ink); }
.tool .tooldetail { color: var(--muted); }
.tool.failed { border-color: var(--bad); }
.tool .tooljump { font-size: 12px; margin-left: 6px; opacity: 0; }
.tool:hover .tooljump { opacity: 1; }
pre.toolout {
  margin: 2px 0 8px 12px; padding: 8px 10px; max-height: 320px; overflow: auto;
  background: var(--code); border-radius: 6px; font-size: 12px; white-space: pre-wrap; word-break: break-word;
}
pre.toolout[hidden] { display: none; }

/* The working line: a mark that breathes, and what is happening. */
.workline {
  display: flex; gap: 10px; align-items: center; padding: 2px 18px 6px; font-size: 13px; color: var(--muted);
  max-width: var(--content-max); margin: 0 auto; width: 100%;
}
.workline[hidden] { display: none; }
.workline .workmark { color: #e8743b; font-size: 16px; display: inline-block; animation: work-breathe 1.6s ease-in-out infinite; }
@keyframes work-breathe { 0%, 100% { transform: scale(.75) rotate(0deg); opacity: .7; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .workline .workmark { animation: none; } }

/* earlier turns of a long conversation, loaded on scrolling up */
.earlierbar { display: block; margin: 4px auto 10px; font-size: 12px; color: var(--muted); }
/* Over an archived transcript: a plain line, since nothing about it is urgent. */
.archivedbar { text-align: center; margin: 4px auto 10px; }
.archivedbar .linkish { font: inherit; }
/* Earlier turns are put in above the view and the position held by hand; the
   browser's own anchoring, on top of that, moved it twice. */
#transcript { overflow-anchor: none; }
.turn.agent .meta .when { color: var(--muted); font-variant-numeric: tabular-nums; }

/* what was pasted into a message, shown with it */
.sentfiles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.sentimg {
  max-width: 260px; max-height: 160px;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: zoom-in;
  background: var(--panel);
}
.sentfile { font-size: 12px; color: var(--muted); }
.imgshade {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.8);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 24px;
}
.imgshade img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
/* Captioned underneath, not over it: on a short screenshot a label on top hid what it showed. */
.sentthumb { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sentlabel { font-size: 12px; line-height: 1; color: var(--muted); }

/* health, at the top of Fleet */
.healthbox { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.healthbox .sectionhead { font-size: 13px; font-weight: 600; color: var(--muted); }
.healthnode { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.healthnode.warn { border-color: var(--warn); }
.healthnode.bad { border-color: var(--bad); }
.healthhead { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.healthname { font-weight: 600; flex: 1; }
.healthon { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.hdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #3fb950); flex: none; }
.hdot.warn { background: var(--warn); }
.hdot.bad { background: var(--bad); }
/* Label then detail as one run of text, so a long detail wraps under it rather than in a sliver beside it. */
.healthcheck { font-size: 13px; display: block; padding-left: 15px; line-height: 1.4; }
.healthcheck .healthlabel { font-weight: 600; margin-right: 6px; }
.healthcheck.warn .healthlabel { color: var(--warn); }
.healthcheck.bad .healthlabel { color: var(--bad); }
.healthcheck .healthdetail { color: var(--muted); }
/* A dot on the Fleet button when anything is amber or red. */
.actbtn.health-warn, .actbtn.health-bad { position: relative; }
.actbtn.health-warn::before, .actbtn.health-bad::before {
  content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 2px var(--bg);
}
.actbtn.health-bad::before { background: var(--bad); }
.healthtop { display: flex; align-items: center; justify-content: space-between; }
.healthtest { font-size: 12px; }
/* a schedule's settings, two to a row */
.schgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.schgrid label { flex-direction: column; align-items: stretch; gap: 2px; }
.schgrid select, .schgrid input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; }
#sch-pacing { font-size: 13px; }
#sch-pacing summary { cursor: pointer; color: var(--muted); }
#sch-pacing > * + * { margin-top: 6px; }
.schedform input.short { width: 64px; }
.machinecmd { font: 12px ui-monospace, monospace; white-space: pre-wrap; word-break: break-all; background: var(--code); border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin: 6px 0; user-select: all; }
.quietselect { font: inherit; font-size: 12px; max-width: 45%; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; }
.healthhead .healthtest { font-size: 12px; }
.healthcheck input[type=password] { font: inherit; font-size: 12px; width: 50%; margin: 0 6px; }
/* text size for one conversation */
.zoomctl { display: inline-flex; gap: 2px; }
.zoomctl .chip { padding-left: 6px; padding-right: 6px; font-size: 12px; }
.workline.clickable { cursor: pointer; }

/* Plugins: the pane's rows, and a plugin's own panel as a tab. */
.pluginrow .warnline { white-space: pre-wrap; }
.plsettings, #pl-inspect { display: flex; flex-direction: column; gap: 6px; }
.plsetform { display: flex; flex-direction: column; gap: 10px; }
.plfields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: start; }
.plfield { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plfield.wide { grid-column: 1 / -1; }
.plfieldname { font-size: 13px; font-weight: 600; color: var(--ink); }
.plreq { font-weight: 400; color: var(--muted); font-size: 12px; }
.plcheck { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.plcheck input[type=checkbox] { margin: 0; flex: none; width: auto; }
.plcheck span { flex: 1; min-width: 0; }
.plfield .plcheck { display: flex; flex-direction: row; }
.plfield input:not([type=checkbox]), .plfield select, .plfield textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; color: var(--ink); }
/* A default is a value that applies, not a disabled box: written, in italics, not the faint grey of a disabled field. */
.plfield input::placeholder, .plfield textarea::placeholder { color: var(--muted); opacity: 1; font-style: italic; }
.plfield.isset input:not([type=checkbox]), .plfield.isset select, .plfield.isset textarea { border-color: var(--accent); }
.plhelp { font-size: 12px; line-height: 1.45; color: var(--muted); }
.plreset { font-size: 12px; }
.plgroup { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; }
.plgroup[open] { padding-bottom: 14px; }
.plgroup > summary { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; cursor: pointer; list-style: none; }
.plgroup > summary::-webkit-details-marker { display: none; }
.plgroup > summary::before { content: '▸'; color: var(--muted); width: 10px; }
.plgroup[open] > summary::before { content: '▾'; }
.plgroupname { font-size: 14px; font-weight: 600; }
.plgroupnote { font-size: 12px; color: var(--muted); }
.plmore { margin-top: 14px; }
.plmore > summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.plsetfoot { position: sticky; bottom: -24px; margin: 0 -24px -24px; padding: 12px 24px; display: flex; align-items: center; gap: 8px;
  background: var(--panel); border-top: 1px solid var(--line); z-index: 1; }
.plsetsaid { flex: 1; min-width: 0; display: grid; gap: 2px; }
.plsetsaid .err { font-size: 12px; font-weight: 600; }
.plsetstatus { flex: 1; font-size: 12px; color: var(--muted); }
.plsetstatus.dirty { color: var(--ink); font-weight: 600; }
.plperms ul { margin: 2px 0 4px; padding-left: 18px; color: var(--muted); font-size: 12px; }
.plperms .listhead { padding: 0; }
.plpanel { padding: 10px 14px; display: flex; flex-direction: column; gap: 12px; }
.plhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plhead .row { margin-left: auto; display: flex; gap: 6px; }
.plsection h3 { font-size: 13px; margin: 0 0 6px; }
.plfold > summary { font-size: 13px; font-weight: 600; cursor: pointer; margin: 0 0 6px; }
.plfold > summary button.plhead { font-weight: 500; margin-left: 12px; vertical-align: middle; }
.pltext { white-space: pre-wrap; }
.plcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 2px; margin: 0 0 14px; }
.plcard > .plsection { margin-bottom: 10px; }
.plcard > .plsection h3 { color: var(--muted); }
.pltable.plbare { margin: 0; }
.pltable.plbare tr > td { border-bottom: 0; padding-top: 0; padding-bottom: 4px; }
.pltable.plbare td[data-col="title"] { font-size: 15px; font-weight: 600; }
.pltable tr.plgrouprow > td { padding: 10px 6px 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pltable tr.plgrouprow > td::first-letter { text-transform: uppercase; }
.plstepfold > details > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding-left: 2px; }
.plstepfold > details > .plsteps { margin-top: 6px; }
.plsteplogfold { margin-top: 8px; }
.plsteplogfold > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.plstepstatus { margin: 0 0 8px; font-weight: 600; }
.plsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plstep { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.plstep-icon { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; line-height: 1; border: 1.5px solid var(--muted); color: var(--muted); box-sizing: border-box; }
.plstep-done .plstep-icon { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.plstep-failed .plstep-icon { background: var(--bad); border-color: var(--bad); color: var(--bg); }
.plstep-attention .plstep-icon { background: var(--warn); border-color: var(--warn); color: var(--bg); }
.plstep-running .plstep-icon { border-color: var(--accent); border-right-color: transparent; animation: composer-spin .8s linear infinite; }
.plstep-name { font-weight: 600; }
.plstep-pending .plstep-name, .plstep-skipped .plstep-name { color: var(--muted); font-weight: 400; }
.plstep-detail { grid-column: 2; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.plstep-failed .plstep-detail { color: var(--bad); }
.plsteplog { margin: 10px 0 0; padding: 8px 10px; max-height: 280px; overflow: auto; background: var(--code); border-radius: 6px; font: 12px/1.5 var(--mono, ui-monospace, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
.pltable { border-collapse: collapse; width: 100%; font-size: 13px; }
.pltable th { text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); padding: 4px 8px; }
.pltable td { border-bottom: 1px solid var(--line); padding: 4px 8px; vertical-align: top; }
.pltable td.placts { white-space: nowrap; text-align: right; vertical-align: top; width: 1%; }
.pltable td.placts .plstack { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.pltable td.placts .plstack button { text-align: center; }
.pltable td.placts .plicons { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.pltable td.placts button.ghost { padding: 1px 8px; }
.pltable td.placts .iconbtn { width: 24px; height: 24px; vertical-align: middle; }
.pltable td.placts .iconbtn svg { width: 15px; height: 15px; }
.plfacts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.plfacts > div { display: flex; gap: 6px; align-items: baseline; }
.plfacts dt { color: var(--muted); }
.plfacts dd { margin: 0; }
.plfile { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.plfile .mdview { max-width: 80ch; }
.tone-ok { color: var(--ok); } .tone-warn { color: var(--warn); } .tone-bad { color: var(--bad); } .tone-muted { color: var(--muted); }
.pllog summary { cursor: pointer; color: var(--muted); }
.pllog pre { max-height: 320px; overflow: auto; }
@media (max-width: 640px) { .pltable { display: block; overflow-x: auto; } }
#pl-inspect .schedhead { display: flex; gap: 8px; align-items: baseline; }
/* Model classes: a grid of inputs, class by provider. */
.clscard { padding: 6px 0; border-bottom: 1px solid var(--line); }
.clsrow { display: grid; grid-template-columns: 88px 1fr; gap: 6px; align-items: center; padding: 2px 0; }
.clsrow input { min-width: 0; }
.clsrow .win { grid-column: 2; }
#classbox .row { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.item.found { flex-wrap: wrap; row-gap: 2px; }
.item.found .title { flex: 1 1 calc(100% - 24px); min-width: 0; }
.item.found > .win { flex-basis: 100%; padding-left: 16px; }
.item .excerpt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
/* Usage by day: a bar per day. */
.daybars { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.dayrow { display: grid; grid-template-columns: 92px 1fr 88px; gap: 6px; align-items: center; }
.daytrack { height: 8px; background: color-mix(in srgb, var(--muted) 18%, transparent); border-radius: 4px; overflow: hidden; }
.daybar { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.daylabel { color: var(--muted); }
.signin-logo { display: block; margin: 0 auto 10px; }
/* Condensed transcript: steps folded behind a one-line summary. */
#transcript.condensed .judgecard.quiet:not(.unfolded), .agenttranscript.condensed .judgecard.quiet:not(.unfolded),
#transcript.condensed .tool:not(.unfolded), #transcript.condensed .toolout:not(.unfolded),
.agenttranscript.condensed .tool:not(.unfolded), .agenttranscript.condensed .toolout:not(.unfolded) { display: none; }
.stepsum { display: block; font-size: 12px; color: var(--muted); padding: 2px 0; text-align: left; }
.stepsum.bad { color: var(--bad); }
.tabrename { font: inherit; width: 16em; padding: 1px 4px; background: var(--panel); color: var(--ink); border: 1px solid var(--accent); border-radius: 4px; }
.permfields { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0; font-size: 13px; }
.permfields dt { color: var(--muted); }
.permfields dd { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.permfrom { display: block; font-size: 12px; color: var(--muted); margin: 2px 0 6px; text-align: left; }

.plugin-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); overflow: auto; }
.plugin-dialog::backdrop { background: rgb(0 0 0 / 50%); }
.plugin-dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 16px; }
.plugin-dialog h2 { font-size: 18px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.plugin-dialog-head > button { flex: none; }
.plugin-dialog-body form { display: grid; gap: 16px; }
.plugin-dialog .plfields { margin: 0; }
@media (max-width: 540px) { .plugin-dialog .plfields, .plfields { grid-template-columns: minmax(0, 1fr); } }

.reviewer-card { min-width: 0; overflow-wrap: anywhere; }
.reviewer-card .row { flex-wrap: wrap; }

/*
 * A plugin's panel opens on its last look, marked as updating, or -- the first
 * time -- on a spinner and the shape of what is coming, never on bare text.
 */
.plspin {
  display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: composer-spin .8s linear infinite;
}
.plupdating { display: flex; align-items: center; gap: 8px; }
.plloading { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.plloadhead { display: flex; align-items: center; gap: 10px; }
.plbar {
  height: 14px; border-radius: 6px; max-width: 100%;
  background: linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 50%, transparent) 50%, var(--line) 75%);
  background-size: 200% 100%; animation: plbar-shimmer 1.4s ease-in-out infinite;
}
@keyframes plbar-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .plspin, .plbar { animation-duration: 4s; } }

.plform { display: grid; gap: 12px; }
.plfield { display: grid; gap: 4px; }
.plfield .pllabel { font-weight: 600; font-size: 13px; }
.plfield textarea, .plfield input, .plfield select { width: 100%; box-sizing: border-box; font: inherit; }

.judgebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

.plbusy { display: inline-flex; align-items: center; gap: 6px; }
.plspin { width: 10px; height: 10px; flex: none; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--ok) 30%, transparent); border-top-color: var(--ok); animation: plspin 0.9s linear infinite; }
@keyframes plspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .plspin { animation: none; border-top-color: var(--ok); background: var(--ok); } }

.agentitem { margin-left: 10px; }
.agentitem > summary { font-weight: 500; }

/* Resets on a subscription's card: a count, and small text buttons. */
.usresets .linkbtn { background: none; border: 0; padding: 0; color: var(--accent, #4f8cff); cursor: pointer; font: inherit; text-decoration: underline; }
.usresets .linkbtn:empty { display: none; }

/* A message that did not send: kept in the transcript with Retry and Edit. */
.failedsend { border: 1px solid var(--err, #e5736d); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: color-mix(in srgb, var(--err, #e5736d) 8%, transparent); }
.failedsend .failedhead { font-weight: 600; margin-bottom: 6px; }
.failedsend .failedtext { white-space: pre-wrap; word-break: break-word; margin: 0 0 8px; font: inherit; opacity: 0.9; max-height: 14em; overflow: auto; }
.failedsend .failedrow { display: flex; gap: 8px; margin-top: 8px; }
.failedsend.retrying { opacity: 0.5; }

/* A message sent to an agent that is working: waiting to be read, then picked up. */
.noticeline.steerwait { opacity: 0.85; }
.noticeline.steerdone { font-size: 0.85em; opacity: 0.7; }

/* A conversation on its way: the tab has already switched. */
.loadingtab { display: flex; align-items: center; gap: 10px; padding: 28px 20px; color: var(--muted, #8b93a1); }
.loadingtab .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: loadspin 0.8s linear infinite; }
@keyframes loadspin { to { transform: rotate(360deg); } }

/* The row's own buttons above a file opened from it. */
.plfilebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 10px; position: sticky; top: 0; background: var(--bg, #1a1b1e); z-index: 1; }

/* An agent's tab: its conversation, read and steered beside the one it belongs to. */
.agentview { display: block; flex: 0 0 auto; }
.agentbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border, #333); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.agentbar .title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentbar .agentfold { margin-left: auto; }
.agenttranscript { padding: 8px 12px; }
.agentcompose { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: var(--bg); border-top: 1px solid var(--border, #333); }
.agentcompose textarea { flex: 1; min-width: 0; resize: none; font: inherit; }

/* A press that is going: its button, its row, and what the plugin is doing about it. */
button.plpressing { cursor: progress; opacity: .8; }
button.plpressing:not(.iconbtn)::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 999px; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: plspin 0.9s linear infinite; }
button.plpressing.iconbtn { animation: plpulse 1s ease-in-out infinite; }
tr.plpending > td, .plpending.plfilebar { background: color-mix(in srgb, var(--accent, #58b8bf) 8%, transparent); }
.plstatus { margin-top: 4px; font-size: 12px; color: var(--muted, inherit); max-width: 28ch; }
.plstatus.err { color: var(--bad, #c0392b); }
@keyframes plpulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { button.plpressing.iconbtn { animation: none; } }

/* A confirmation or notice in the page, in place of the browser's. */
dialog.confirm-dialog { border: 1px solid var(--line, #444); border-radius: 12px; background: var(--panel, #1d1d20); color: inherit; padding: 18px 20px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 18px 60px rgba(0,0,0,.5); }
dialog.confirm-dialog::backdrop { background: rgba(0,0,0,.45); }
dialog.confirm-dialog h2 { font-size: 15px; margin: 0 0 8px; }
.confirm-text p { margin: 0 0 6px; line-height: 1.45; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.confirm-actions button.danger { background: var(--bad, #c0392b); border-color: var(--bad, #c0392b); color: #fff; }
dialog.detail-dialog { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px); }
dialog.detail-dialog .plugin-dialog-body { overflow: auto; max-height: calc(100vh - 160px); }
/* A detail with columns: the markdown across the top, then texts side by side (a script beside its reviewers'
   verdicts), of equal width, each scrolling by itself so one long text does not push the others away. */
dialog.detail-dialog-columns { width: min(1400px, calc(100vw - 32px)); }
dialog.detail-dialog-columns[open] { display: flex; flex-direction: column; height: calc(100vh - 64px); overflow: hidden; }
dialog.detail-dialog-columns .plugin-dialog-body { flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.detail-lead { flex: 0 1 auto; max-height: 30%; overflow: auto; }
.detail-columns { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.detail-column { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.detail-column-title { flex: none; font-size: 14px; margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.detail-column-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; }
.detail-column-body pre { overflow-x: auto; }
/* On a phone the columns stack and the dialog scrolls as one, as the plain detail does. */
@media (max-width: 640px) {
  dialog.detail-dialog-columns[open] { display: block; height: auto; max-height: calc(100vh - 32px); overflow: auto; }
  dialog.detail-dialog-columns .plugin-dialog-body { display: block; overflow: visible; }
  .detail-lead { max-height: none; overflow: visible; margin-bottom: 12px; }
  .detail-columns { display: grid; grid-auto-flow: row; grid-auto-columns: auto; }
  .detail-column { display: block; }
  .detail-column-body { overflow: visible; }
}

/* A folded run of one schedule's follow-ups. */
.followgroup { margin: 4px auto 14px; display: flex; flex-direction: column; align-items: center; }
.followgroup .followhead { border-style: dashed; }
.followgroup .followbody { width: 100%; margin-top: 8px; opacity: .85; }

/* The last message to the agent, kept at the top of the view while it is scrolled out of sight. Zero high, so it moves nothing. */
.chatpanel { position: relative; }
.stickyprompt { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 6; pointer-events: none; }
.stickyprompt > .stickybox { pointer-events: auto; }
.stickyprompt[hidden] { display: none; }
.stickybox { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 10px; align-items: baseline; text-align: left; width: 100%;
  padding: 7px 16px; border: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(6px);
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; box-shadow: 0 6px 14px rgb(0 0 0 / 18%); }
.stickybox:hover { color: var(--ink); }
.stickywho { flex: none; color: var(--ink); font-weight: 600; }
.stickytext { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }

/* A row's buttons on one line; the rest under a menu. */
.pltable td.placts { white-space: nowrap; text-align: right; vertical-align: top; width: 1%; position: relative; }
.plrowbtns { display: flex; align-items: center; justify-content: flex-end; gap: 3px; flex-wrap: nowrap; }
.plmoreholder { position: relative; display: inline-block; }
.plmore { padding: 1px 10px; font-weight: 700; letter-spacing: 1px; }
.plmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 40%); }
.plmenu[hidden] { display: none; }
.plmenu button { text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 6px; width: 100%; color: var(--ink); }
.plmenu button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* The confirmation's own buttons: the action is filled, Cancel has an edge. */
.confirm-actions button { padding: 8px 18px; font-weight: 550; }
.confirm-actions button.ghost { color: var(--ink); }
.confirm-actions button:not(.ghost):not(.danger) { background: var(--accent); border-color: transparent; color: #fff; }
.confirm-actions button:not(.ghost):not(.danger):hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.confirm-actions button.danger { background: #d9534f; border-color: transparent; color: #fff; }

td.pldetailcell { cursor: pointer; }
td.pldetailcell:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Icon buttons in a row: the same edge and fill as a button, or they vanish into the table. */
.pltable td.placts .iconbtn { border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); border-radius: 8px; }
.pltable td.placts .iconbtn:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.pltable td.placts .iconbtn.icon-check { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pltable td.placts .iconbtn.icon-check:hover:not(:disabled) { background: color-mix(in srgb, var(--ok) 24%, transparent); }

table.pltable.plfixed { table-layout: fixed; width: 100%; }
table.pltable.plfixed td, table.pltable.plfixed th { overflow-wrap: anywhere; }
table.pltable.plfixed td.placts { width: auto; }

.pltable td.placts .iconbtn.icon-wrench { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pltable td.placts .iconbtn.icon-wrench:hover:not(:disabled) { background: color-mix(in srgb, var(--warn) 24%, transparent); }

.plslot { display: inline-block; width: 24px; height: 24px; flex: none; }

/* Dialogs stand off from the page behind them: a visible edge. */
dialog.confirm-dialog, dialog.plugin-dialog { border: 1px solid color-mix(in srgb, var(--ink) 30%, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 18px 60px rgb(0 0 0 / 55%); }

/* A row's press message floats over the table instead of adding to the row, so nothing moves while it shows. */
td.placts > .plstatus { position: absolute; right: 8px; top: calc(100% - 6px); z-index: 15; max-width: 260px; white-space: normal; text-align: left; padding: 5px 10px; margin: 0;
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--ink) 30%, var(--panel)); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 40%); font-size: 12px; }

.plpressmsg { color: var(--accent); font-weight: 550; }
.plpressmsg.err { color: var(--bad); }

.pltable td.placts .iconbtn.icon-x { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.pltable td.placts .iconbtn.icon-x:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 22%, transparent); }

.plgrip { cursor: grab; color: var(--muted); letter-spacing: -2px; user-select: none; display: inline-block; padding: 2px 0; }
/* The grip's own column at the front of a draggable row. */
.pltable .plgripcell { width: 22px; padding-left: 6px; padding-right: 0; text-align: center; }
.pltable tr:not(:hover) .plgripcell .plgrip { opacity: .55; }
.plgrip:active { cursor: grabbing; }
tr.pldragging { opacity: .45; }
tr.pldropabove > td { box-shadow: inset 0 2px 0 var(--accent); }
tr.pldropbelow > td { box-shadow: inset 0 -2px 0 var(--accent); }

/* Every icon button in a row is the same square, whatever room the row has: they do not shrink to fit. */
.plrowbtns > * { flex: none; }
.pltable td.placts .iconbtn, .plslot { width: 24px; height: 24px; min-width: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.pltable td.placts .iconbtn svg { width: 14px; height: 14px; }

/* "Something is working" is the chat's own mark, not a different circle: the orange asterisk that breathes. */
.plspin { width: auto; height: auto; border: 0; border-radius: 0; animation: none; display: inline-flex; align-items: center; justify-content: center; }
.plspin::before { content: '✻'; color: #e8743b; font-size: 15px; line-height: 1; display: inline-block; animation: work-breathe 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .plspin::before { animation: none; } }

/* The working column: an agent, or only code. */
.plmark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.plmark-agent::before { content: '✻'; color: #e8743b; font-size: 15px; line-height: 1; display: inline-block; animation: work-breathe 1.6s ease-in-out infinite; }
.plmark-code::before { content: '⚙︎'; color: var(--accent); font-size: 16px; line-height: 1; display: inline-block; animation: plspin 3.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .plmark::before { animation: none; } }
.plmark-link { cursor: pointer; border-radius: 6px; }
.plmark-link:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* Compact: every button is behind the ⋯, which is all the button column holds. */
.plcompactonly { display: none; }
table.plcompact .plcompactonly { display: block; }
table.plcompact .plmoreholder.plcompactonly { display: inline-block; }
table.plcompact .plrowbtns > :not(.plmoreholder) { display: none; }

/* Compact: the columns are only as wide as what is in them (the title takes the rest), not the widths of the full layout. */
table.pltable.plfixed.plcompact { table-layout: auto; }
/* Too wide even so (a phone): it scrolls sideways within its panel, never the page. */
.plscrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* At least as wide as its longest words: on a phone the table is a block, which was squeezed to the panel and clipped.
   Its cells wrap between words there (never inside one), so a title wraps rather than stretching the table. */
.plscrollx > table.pltable.plfixed.plcompact { width: 100%; min-width: min-content; flex: none; }
.plscrollx > table.pltable.plfixed.plcompact td:not(.placts), .plscrollx > table.pltable.plfixed.plcompact th { white-space: normal; overflow-wrap: normal; }
/* The title keeps 160 pixels, so a word too long for it (Policy.ReviewAutoRenewOfferSentDate) breaks inside rather than widening the table. */
.plscrollx > table.pltable.plfixed.plcompact td[data-col="title"] { overflow-wrap: anywhere; }
table.pltable.plfixed.plcompact col { width: auto !important; }
table.pltable.plfixed.plcompact td, table.pltable.plfixed.plcompact th { white-space: nowrap; overflow-wrap: normal; }
table.pltable.plfixed.plcompact td[data-col="title"], table.pltable.plfixed.plcompact th[data-col="title"] { white-space: normal; min-width: 160px; }
table.pltable.plfixed.plcompact td.placts { width: 1%; }

.pltable td.placts { padding-left: 4px; padding-right: 8px; }

.plmenu button { display: flex; align-items: center; gap: 10px; }
.plmenuicon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plmenuicon.icon-check { color: var(--ok); }
.plmenuicon.icon-x { color: var(--bad); }
.plmenuicon.icon-wrench { color: var(--warn); }

/* The agent's pointer over the live view. */
.lvcursor { position: absolute; width: 0; height: 0; pointer-events: none; color: #ff8a1f; opacity: 0; z-index: 3;
  transition: left 0.35s ease-out, top 0.35s ease-out, opacity 0.4s; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 55%)); }
.lvcursor.on { opacity: 1; }
.lvcursor svg { position: absolute; left: -2px; top: -1px; }
.lvring { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #ff3b30;
  animation: lvring 0.8s ease-out forwards; }
.lvring.type { border-color: #4a8cff; }
@keyframes lvring { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lvcursor { transition: none; } .lvring { animation-duration: 0.01s; } }

/* The usage pane: a line a subscription, a click to open it. */
.usline { display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.usline:focus-visible { outline: 2px solid var(--accent, #4a8cff); outline-offset: 2px; border-radius: 4px; }
.ustop { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.usname { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; }
.usname b { flex: none; }
.usname .usmeta { margin: 0; overflow: hidden; text-overflow: ellipsis; }
/* The meter: the bar takes what is left of the line; the share, the time left and any flag keep their size. */
.usmeter { display: flex; align-items: center; gap: 8px; padding-left: 14px; min-width: 0; }
.usline .pacebar { flex: 1 1 40px; min-width: 40px; margin: 0; position: relative; overflow: visible; }
.usline .pacepct { flex: none; width: 2.6em; text-align: right; }
.usline .usreset { flex: none; width: 4.4em; text-align: right; }
.usline .usnoread { flex: none; }
.usflags { display: flex; gap: 4px; flex: none; }
.uschev { flex: none; width: 28px; height: 22px; line-height: 22px; text-align: center; font-size: 18px; color: var(--muted); border-radius: 4px; }
.usline:hover .uschev { color: var(--ink); background: var(--bg); }
.uscard:not(.open) { padding-top: 6px; padding-bottom: 6px; margin-bottom: 6px; }
.usfull { margin: 4px 0 0 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.usworth { margin-top: 4px; }
input.usprice { width: 5em; }

.ushead select.usfilter { flex: 1 1 100%; padding: 3px 6px; font-size: 12px; }
.ushead select.usfilter option { background: var(--panel); color: var(--ink); }

/* A plugin form's intro keeps its line breaks (the runner's plan is several lines). */
.plform > p.win { white-space: pre-wrap; }

/* People and access dialog */
dialog.access-dialog { width: min(1040px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 32px)); display: flex; flex-direction: column; }
dialog.access-dialog:not([open]) { display: none; }
.access-dialog .plugin-dialog-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.access-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.access-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted, inherit); padding: 8px 12px; }
.access-tabs button.active { color: var(--ink); border-bottom-color: var(--accent, #8b8bff); }
.access-pane { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
.access-list { overflow: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.access-item { text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; color: inherit; }
.access-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.access-item.active { border-color: var(--accent, #8b8bff); background: color-mix(in srgb, var(--accent, #8b8bff) 12%, transparent); }
.access-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.access-item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-item-sub { font-size: 12px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-detail { overflow: auto; padding-right: 4px; }
.access-head { margin-bottom: 12px; }
.access-head h3 { margin: 0 0 4px; font-size: 17px; }
.access-section { border-top: 1px solid var(--line); padding: 12px 0; display: grid; gap: 6px; }
.access-section h3 { margin: 0; font-size: 14px; }
.access-hint { font-size: 12px; opacity: .7; margin: 0; }
.access-warn { color: var(--warn); margin: 0; }
.access-summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.access-summary dt { opacity: .7; }
.access-summary dd { margin: 0; }
.access-check { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; cursor: pointer; }
.access-check input { flex: none; }
.access-all { font-weight: 600; }
.access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.access-grid.disabled { opacity: .45; }
.access-policy input:not([type]), .access-policy input[type=text] { width: 100%; max-width: 360px; }
.access-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.access-invite { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
button.danger.ghost { color: var(--bad); }
@media (max-width: 720px) {
  dialog.access-dialog { height: calc(100dvh - 16px); width: calc(100vw - 16px); padding: 16px; }
  .access-pane { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .access-list { max-height: 30dvh; }
}

/* Signing a Claude subscription in again: the vendor's link, then a box for its code. */
.signin { margin-top: 4px; }
.signin .signinsteps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.signin .signinsteps a { font-size: 12px; }
.signin .signinsteps input { font: inherit; font-size: 12px; flex: 1 1 14em; min-width: 0; }

/* A person's own key, on a plugin's panel. */
.plkey { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.plkey[hidden] { display: none; }
.plkey h3 { margin: 0; font-size: 1em; }
.plkey .pllabel { font-weight: 600; margin-top: 4px; }
.plkey .keyline { display: flex; gap: 8px; align-items: flex-start; }
.plkey .keyline code { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

/*
 * The sidebar layout (docs/hub-redesign-plan.md), one browser at a time until it is finished. Everything is scoped
 * to it, and the panes themselves are the same ones the old layout shows: they are moved, not rewritten.
 */
html[data-layout="sidebar"] { --content-max: 860px; }
#sidebar { display: none; }
html[data-layout="sidebar"] #sidebar {
  display: flex; flex-direction: column; flex: none; width: 280px; min-height: 0;
  border-right: 1px solid var(--line); background: var(--panel);
}
html[data-layout="sidebar"].sidehidden #sidebar { display: none; }
#sidebar .sidehead { display: flex; align-items: center; gap: 9px; padding: 11px 8px 8px 14px; }
#sidebar .sidename { flex: 1; min-width: 0; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar #conn { display: block; padding: 0; border: 0; font-size: 12px; line-height: 1.3; }
.sideicon {
  position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.sideicon:hover { background: var(--bg); color: var(--ink); }
.sideicon.active { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.sideicon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#sidebar .sideicons { display: flex; gap: 4px; margin: 0 10px 10px; padding: 3px; border-radius: 10px; background: var(--code); }
#sidebar .sideicons .actbtn { flex: 1; width: auto; height: 32px; border-radius: 8px; }
#sidebar .sideicons .actbtn { border-left: 0; }
#sidebar .sideicons .actbtn.active { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
#sidebar .actbtn::after, #convhead .actbtn::after { display: none; }
#sideconv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#sideconv[hidden] { display: none; }
.sidetop { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 8px; }
.sidenew {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px;
  background: var(--code); color: var(--ink); font: inherit; font-weight: 550; cursor: pointer; text-align: left;
}
.sidenew:hover, .sidenew.active { background: var(--line); }
.sidenew svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#sidesearch {
  width: 100%; min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 13px;
}
.sideeveryone { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 0 2px; }
.sideeveryone[hidden] { display: none; }
/* The folder picker's Everyone's folders, for an administrator on a machine with people's folders. */
.everyonefolders { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 4px 8px; }
#sidelist { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 10px; }
.sidesect {
  display: flex; align-items: center; gap: 5px; width: 100%; padding: 12px 9px 4px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; text-align: left;
}
button.sidesect { cursor: pointer; }
button.sidesect.fold { font-size: 13px; min-height: 32px; padding: 10px 9px 4px; border-radius: 7px; }
button.sidesect.fold:hover { background: var(--bg); }
.sidechev { width: 12px; flex: none; }
.sidesectname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidecount { flex: none; font-weight: 500; font-size: 12px; padding: 0 7px; border-radius: 9px; background: var(--line); color: var(--ink); }
button.sidesect:hover { color: var(--ink); }
.siderow {
  display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 4px 6px 4px 9px; border-radius: 7px; cursor: pointer;
}
.siderow:hover { background: var(--bg); }
.siderow.active { background: var(--code); box-shadow: inset 0 0 0 1px var(--line); }
.siderow .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.siderow .sub { flex: none; max-width: 40%; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.siderow .two { flex: 1; min-width: 0; }
.siderow .two .label, .siderow .two .sub { display: block; max-width: none; }
.siderow.agent { min-height: 28px; padding-left: 27px; font-size: 13px; color: var(--muted); }
.siderow.earlier .label { color: var(--muted); }
.siderow .acts { display: none; gap: 2px; flex: none; }
.siderow:hover .acts, .siderow:focus-within .acts { display: flex; }
.siderow .act {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 22px; text-align: center;
}
.siderow .act:hover { background: var(--line); color: var(--ink); }
.siderow .act.on { color: var(--accent); }
.siderow .done { flex: none; color: var(--ok); font-size: 12px; }
#sidepanes { flex: 1; min-height: 0; overflow-y: auto; }
#sidepanes[hidden] { display: none; }
#sidepanes .expane { flex: none; overflow: visible; display: block; }
#sidepanes .expane[hidden] { display: none; }
.sidefoot { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sidefoot .grow { flex: 1; }
/* The prompt on a line of its own, its × beside it, and not left alone on the line after. */
.sidefoot #notify { order: 1; }
.sidefoot .sidenotify { order: 1; display: inline-flex; align-items: center; gap: 4px; }
.sidefoot .sidenotify:not(:has(#notify:not([hidden]))) { display: none; }
.sidefoot #notifyno { order: 2; }
.sidefoot .linkish { padding: 2px 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.sidefoot .linkish:hover { color: var(--ink); text-decoration: underline; }

/* One line of a list: a dot, a name, a few words, the rest in a menu. */
.siderow.sideline { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
.siderow.sideline > .dot, .siderow.sideline > .hdot { flex: none; margin-top: 6px; }
.siderow.sideline .two .label { line-height: 1.35; }
.siderow.sideline .two .sub { font-size: 13px; line-height: 1.35; }
.siderow.sideline .two .sub.err { color: var(--bad); }
.siderow.sideline .two .sub.warn { color: var(--warn); }
.siderow.sideline.still { cursor: default; }
.siderow.sideline.still:hover { background: none; }
.sidebar-bar { margin: 5px 0 2px; height: 5px; }
#sidepanes .sidesect { padding-top: 14px; }
#sidepanes .list { padding: 0 10px 8px; }
#sidepanes .list > .win { padding: 4px 9px; }
#sidepanes .listhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 19px 4px; font-size: 12px; }
#sidepanes .filterbar { padding: 0 10px 4px; }
#sidepanes #pluginspane .filterbar #pl-node { display: none; }
#fleetside { padding: 0 10px 10px; }
.fleettop { display: flex; flex-direction: column; gap: 6px; padding: 0 0 2px; }
.fleettop button.ghost { align-self: stretch; padding: 6px 10px; }
.fleetsum { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--ink); font: inherit; font-weight: 550; text-align: left; cursor: pointer; }
.fleetsum:hover { background: var(--bg); }
.fleetsum.bad { border-color: var(--bad); }
.fleetsum.warn { border-color: var(--warn); }

/* Dialogs that stay in the page. */
dialog.kept-dialog { max-height: calc(100vh - 64px); overflow: hidden; }
dialog.kept-dialog[open] { display: flex; flex-direction: column; }
dialog.kept-dialog.tall { width: min(980px, calc(100vw - 32px)); height: calc(100vh - 64px); }
dialog.kept-dialog .plugin-dialog-body { flex: 1; min-height: 0; overflow-y: auto; }
dialog.kept-dialog .expane { display: block; overflow: visible; }
dialog.kept-dialog .expane[hidden] { display: none; }
dialog.kept-dialog .filterbar { padding: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
dialog.form-dialog .schedform { border-bottom: 0; padding: 0; gap: 8px; }
dialog.form-dialog .schedform input:not([type=checkbox]), dialog.form-dialog .schedform textarea, dialog.form-dialog .schedform select { width: 100%; }
dialog.form-dialog #pl-node { margin-bottom: 2px; }
.dialogtabs { display: flex; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.dialogtab { padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.dialogtab:hover { color: var(--ink); }
.dialogtab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 550; }
.overviewpane[hidden] { display: none; }
.overviewpane .healthbox { padding: 0; border-bottom: 0; }
.overviewpane .cards { padding: 0; }
dialog.kept-dialog .healthbox { padding: 0 0 16px; margin-bottom: 16px; }
dialog.kept-dialog .healthbox:last-child { margin-bottom: 0; }
.detailline { margin: 0 0 6px; overflow-wrap: anywhere; }
#accesslist .item.sched { position: relative; padding-right: 96px; margin-bottom: 6px; cursor: default; }
#accesslist .item.sched:hover { border-color: var(--line); }
#accesslist .item.sched > .row { position: absolute; top: 8px; right: 10px; margin: 0; }
#accesspane .list { padding: 0; }
.devicegroup .item.sched { margin-left: 14px; }
.devicegroup { margin: 0 0 6px; }
.devicegroup > summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.devicegroup[open] > summary { margin-bottom: 6px; }
.devicegroup > summary .title { font-weight: 550; }
.devicegroup > summary .win { margin-left: auto; }
.devicegroup > summary.listhead { border: 0; padding: 10px 10px 4px; }

/* The conversation's header. */
#convhead { display: none; }
html[data-layout="sidebar"] #convhead {
  display: flex; align-items: center; gap: 8px; flex: none; min-height: 56px; padding: 6px 10px 6px 18px; border-bottom: 1px solid var(--line);
}
html[data-layout="sidebar"]:not(.sidehidden) #sideshow { display: none; }
#convhead .headmain { flex: 1; min-width: 0; }
#convtitle { font-weight: 620; font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#convhead .context { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; max-width: none; min-height: 0; }
#convhead .context .grow { display: none; }
html.pluginconv #convhead .context { display: none; }
#convhead .folderpop { top: 100%; bottom: auto; }
#convhead .headicons { display: flex; align-items: center; gap: 2px; flex: none; }
#convhead .actbtn { width: 34px; height: 34px; border-radius: 8px; }
#convhead .actbtn { border-left: 0; }
#convhead .actbtn.active { background: var(--code); }
#convhead .headgap { width: 1px; height: 20px; margin: 0 4px; background: var(--line); }
html[data-layout="sidebar"].drafting #convhead .headicons { display: none; }
html[data-layout="sidebar"] #condensebtn,
html[data-layout="sidebar"] .zoomctl { display: none; }

/* The panel on the right: the same panel, on the other side. */
html[data-layout="sidebar"] .editorarea { order: 1; }

/* A conversation's column: a centred message box, without the rule across the window. */
html[data-layout="sidebar"] form#composer { border-top: 0; background: none; padding: 0 24px 16px; }
html[data-layout="sidebar"] #composer .row,
html[data-layout="sidebar"] #composer .controls { max-width: var(--content-max); }
html[data-layout="sidebar"] #composer .row {
  border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 10px 10px 2px; background: var(--panel); margin-top: 0;
}
html[data-layout="sidebar"] #composer .row textarea { border: 0; background: none; outline: 0; }
html[data-layout="sidebar"] #composer .controls {
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; padding: 2px 8px 6px; margin-top: 0; background: var(--panel);
}

/* Starting a conversation: nothing to read yet, so the box sits in the middle. */
#draftline { display: none; }
html[data-layout="sidebar"].drafting .chatpanel { justify-content: center; }
html[data-layout="sidebar"].drafting #transcript { display: none; }
html[data-layout="sidebar"].drafting #draftline { display: block; margin: 0 0 18px; text-align: center; font-size: 24px; font-weight: 620; }
html[data-layout="sidebar"].drafting #composer .context { margin-bottom: 8px; }

/* What the row's styles were scoped to the composer for, now it can also be in the header. */
html[data-layout="sidebar"] .context .native { display: none !important; }
#convhead .actbtn { padding: 0; flex: none; }
#convhead .actbtn svg, #sidebar .actbtn svg { flex: none; width: 18px; height: 18px; }
#sidebar .actbtn { padding: 0; }
/* Built for a wider window: one column, and never wider than the sidebar. */
#sidepanes { overflow-x: hidden; }
#sidepanes .cards { grid-template-columns: minmax(0, 1fr); padding: 8px; }
#sidepanes .card, #sidepanes .list { min-width: 0; max-width: 100%; }
#sidepanes .list { padding: 8px; }

/*
 * The new layout on a phone: the list is a screen of its own, with the views in a bottom bar, and a conversation is
 * another, with its panels as a sheet. Touch targets of 44px, since a thumb is what presses these.
 */
#phonepanels { display: none; }
@media (max-width: 640px) {
  html[data-layout="sidebar"] #sidebar {
    position: fixed; inset: 0; z-index: 30; width: auto; border-right: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  html[data-layout="sidebar"].sidehidden:not(.phonemain) #sidebar { display: flex; }
  html[data-layout="sidebar"].phonemain #sidebar { display: none; }
  #sidehide { display: none; }
  #sidebar .sidehead { padding: 12px 12px 8px 16px; }
  #sidebar .sidename { font-size: 17px; }
  #sidebar .sideicons {
    order: 10; margin: 0; padding: 0; border-radius: 0; background: var(--panel); border-top: 1px solid var(--line); gap: 0;
  }
  #sidebar .sideicons .actbtn {
    flex-direction: column; gap: 2px; height: 56px; width: auto; border-radius: 0; background: none; box-shadow: none;
    flex: 1 1 0; min-width: 0;
  }
  #sidebar .sideicons .actbtn svg { width: 22px; height: 22px; }
  #sidebar .sideicons .actbtn.active { color: var(--ink); background: none; box-shadow: none; }
  #sidebar .sideicons .actbtn::after {
    display: block; position: static; content: attr(data-label); transform: none; opacity: 1; padding: 0; margin: 0;
    background: none; border: 0; box-shadow: none; color: inherit; font-size: 11px; font-weight: 500; white-space: nowrap; pointer-events: none;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  #sidebar .sideicons .railcount { right: auto; left: calc(50% + 4px); top: 4px; }
  .sidetop { padding: 0 12px 8px; }
  .sidenew { min-height: 44px; }
  #sidesearch { min-height: 44px; font-size: 16px; }
  #sidelist { padding: 0 8px 8px; }
  .siderow { min-height: 52px; font-size: 15px; padding: 6px 4px 6px 10px; }
  .siderow.agent { min-height: 44px; font-size: 14px; }
  .siderow .acts { display: flex; }
  .siderow .act { width: 44px; height: 44px; line-height: 44px; font-size: 18px; }
  button.sidesect { min-height: 44px; }
  /* Four icons, Turn on notifications and its ×, on one line of a 375-pixel phone: still 44 high to tap. */
  .sidefoot .sideicon { min-width: 40px; min-height: 44px; }
  .sidefoot .linkish { min-width: 32px; min-height: 44px; }

  html[data-layout="sidebar"] #convhead { padding: 4px 4px 4px 2px; gap: 2px; min-height: 52px; }
  html[data-layout="sidebar"] #sideshow { display: flex !important; width: 44px; height: 44px; }
  #convtitle { font-size: 15px; }
  #convhead .context { flex-wrap: nowrap; overflow: hidden; }
  #convhead .context .chip { padding: 0 4px; font-size: 12px; }
  #convhead .context #gitstat, #convhead .context #worktreesbtn, #convhead .context #changedbtn { display: none; }
  html[data-layout="sidebar"] #phonepanels { display: flex; width: 44px; height: 44px; }
  html[data-layout="sidebar"].drafting #phonepanels { display: none; }


  html[data-layout="sidebar"] form#composer { padding: 0 10px max(10px, env(safe-area-inset-bottom)); }

  /* A dialog is the whole screen, as a sheet would be. */
  dialog.kept-dialog, dialog.kept-dialog.tall { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  dialog.form-dialog { height: auto; max-height: 100dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .siderow.sideline { min-height: 56px; }
  .dialogtabs { overflow-x: auto; }
  .dialogtab { min-height: 44px; white-space: nowrap; }
}

/* A panel's rows and toolbar: what a row waits on in words, the rest under ⋯. */
.pltable tr.plrowclick { cursor: pointer; }
.pltable tr.plrowclick:hover > td { background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* A card's head keeps what it is waiting on in words however narrow the panel: Deploy release is not to be looked for under a menu. */
table.pltable.plbare.plcompact .plrowbtns > button.plword { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; white-space: nowrap; }
.plmenu button.plcompactonly { display: none; }
table.plcompact .plmenu button.plcompactonly { display: block; }
table.pltable.plbare.plcompact .plmenu button.plcompactonly { display: none; }
table.pltable.plbare.plfixed.plcompact td[data-col="title"] { min-width: 0; }
.pltable:not(.plcompact) td.placts button.plword { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; }
button.plword svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.plword.icon-check { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
button.plword.icon-wrench { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.plmoreslot { width: 34px; flex: none; }
.plmenu { white-space: nowrap; }
.plmenu.plmenu-up { top: auto; bottom: calc(100% + 4px); }
.plhead .row { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.pltable .plclamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.plshowall { display: block; margin-top: 6px; white-space: normal; }
.plugin-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.plugin-dialog-actions button { display: inline-flex; align-items: center; gap: 6px; }

/* Needs you, and what the rail's marks count. */
#sidebar .actbtn { position: relative; }
.railcount { position: absolute; top: 1px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center;
  background: var(--warn); color: #1a1a1a; box-shadow: 0 0 0 2px var(--code); }
.railcount.bad { background: var(--bad); color: #fff; }
#sidebar .actbtn.health-warn[data-count]::before, #sidebar .actbtn.health-bad[data-count]::before { content: attr(data-count); top: 1px; right: 3px; width: auto; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; color: #1a1a1a; box-shadow: 0 0 0 2px var(--code); }
#sidebar .actbtn.health-bad[data-count]::before { color: #fff; }
.sideempty { padding: 12px 14px; color: var(--muted); font-size: 13px; }
tr.plflash > td { animation: plflash 2.4s ease-out 1; }
@keyframes plflash { 0%, 40% { background: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.plflash > td { animation: none; background: color-mix(in srgb, var(--accent) 14%, transparent); } }

/* A conversation's dot earns its place: none with nothing going on, moving while it runs, amber when it waits, blue when unread. */
.dot.convdot.done:not([class*="attn-"]) { visibility: hidden; }
.dot.convdot.running:not([class*="attn-"]) { animation: convdot 1.8s ease-in-out infinite; }
@keyframes convdot { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot.convdot.running { animation: none; } }
.siderow.sideline.needrow .two .label { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* A pinned conversation being dragged, and where it would land. */
#sidelist .siderow.pindragging { opacity: .45; }
#sidelist .siderow.pindropabove { box-shadow: inset 0 2px 0 var(--accent); }
#sidelist .siderow.pindropbelow { box-shadow: inset 0 -2px 0 var(--accent); }

/* A plugin's panel: the load on its machine above its tabs (docs/panel-plan.md, B). */
.plmachine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.plmachinename { font-weight: 600; }
.plmeter { display: grid; gap: 3px; min-width: 112px; }
.plmeterlab { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.plmeterlab b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.plmeterbar { height: 5px; border-radius: 3px; background: var(--code); overflow: hidden; }
.plmeterbar i { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.plmeterbar i.warn { background: var(--warn); }
.plmeterbar i.bad { background: var(--bad); }
/* Its tabs: a row of names with their counts, the shown one underlined in the accent. */
.pltabs { margin-top: 6px; }
.pltabrow { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pltabrow::-webkit-scrollbar { display: none; }
.pltab { display: flex; align-items: center; gap: 6px; font: inherit; font-weight: 500; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px 7px; cursor: pointer; white-space: nowrap; }
.pltab:hover { color: var(--ink); }
.pltab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.pltab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pltabn { font-size: 11px; font-variant-numeric: tabular-nums; background: var(--code); color: var(--muted); border-radius: 9px; padding: 0 6px; line-height: 17px; }
.pltab.attn .pltabn { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.pltabpane[hidden] { display: none; }
@media (max-width: 640px) { .plmeter { min-width: 0; flex: 1 1 40%; } .pltab { padding: 10px 10px 9px; } }

/* On a phone the conversation's view buttons are one menu (#phonepanels); each view opens as a screen with its tab. */
@media (max-width: 640px) { #convhead .headicons { display: none; } }
/* A plugin's conversation: its panel, not the folder's views (renderSidebar sets html.pluginconv). */
#panelviewbtn { display: none; }
html.pluginconv #panelviewbtn { display: flex; }
html.pluginconv #convhead .actbtn[data-view="files"], html.pluginconv #convhead .actbtn[data-view="changes"],
html.pluginconv #convhead .actbtn[data-view="terminals"], html.pluginconv #convhead .actbtn[data-view="browser"] { display: none; }

/* A pane's own buttons at the end of its tab strip: below, zoom, own window. */
.doctabs .gtools { margin-left: auto; display: flex; align-items: center; gap: 2px; padding: 0 4px; flex: none; }
.gtool { width: 24px; height: 24px; display: grid; place-items: center; background: none; border: 0; border-radius: 5px; color: var(--muted); cursor: pointer; }
.gtool:hover, .gtool.on { background: var(--code); color: var(--ink); }
.gtool:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gtool svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Zoomed: the one pane fills the window; the sidebar, the conversation's header and every other pane are out of the way. */
html.zoomed #sidebar, html.zoomed #convhead { display: none !important; }
html.zoomed #editorrow .pgroup:not(.zoomgroup), html.zoomed #editorrow .psash, html.zoomed #editorrow .psplit:not(.zoomholds) { display: none !important; }
/* Every box on the way to it takes the whole room: a lone member with a share under 1 grows only by that share. */
html.zoomed #editorrow .pgroup.zoomgroup, html.zoomed #editorrow .psplit.zoomholds { flex: 1 1 0px !important; }
/* A popped-out pane: its one tab and nothing else. */
html.popout #sidebar, html.popout #convhead, html.popout .doctabs { display: none !important; }

/* A plugin's panel, tidied (2026-11-05): one height for the header's buttons, the switches on one line, the key a quiet footer. */
.plhead { padding-bottom: 2px; }
.plhead .row > button, .plhead .row > .plmenuwrap > button, .plhead .row > * > button.ghost { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.plcontrols { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 2px; }
.plcontrolsname { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.plbtnrow { display: flex; flex-wrap: wrap; gap: 6px; }
.plbtnrow > button { height: 28px; padding: 0 12px; font-size: 13px; }
.pltabpane > .plsection:first-child { margin-top: 10px; }
.pltabpane > .plsection h3 { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.plkey { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); gap: 6px; font-size: 13px; }
.plkey h3 { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.plkey .row { display: flex; gap: 6px; flex-wrap: wrap; }
.plkey .row > button { height: 28px; padding: 0 12px; font-size: 13px; }
.pllog { margin-top: 18px; }
/* Mine / Everyone's, for a panel drawn per person. */
.plscope { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; height: 30px; }
.plscopebtn { background: none; border: 0; padding: 0 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.plscopebtn + .plscopebtn { border-left: 1px solid var(--line); }
.plscopebtn.on { background: var(--code); color: var(--ink); font-weight: 500; }
.plscopebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* A plugin's settings: pages down the left, the page on the right, Save at the foot (2026-11-06). */
dialog.plugin-dialog.plsetwide { width: min(1040px, calc(100vw - 32px)); max-width: none; }
.plsetlayout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 24px; min-height: min(60vh, 620px); }
.plsetnav { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; align-self: start; }
.plsetfind { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; }
.plsetnavlist { display: flex; flex-direction: column; gap: 2px; }
.plsetnavbtn { display: flex; justify-content: space-between; align-items: center; text-align: left; background: none; border: 0; border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.plsetnavbtn:hover { background: var(--code); color: var(--ink); }
.plsetnavbtn.on { background: var(--code); color: var(--ink); font-weight: 600; }
.plsetnavbtn[data-count]:not([data-count=""])::after { content: attr(data-count); font-size: 11px; font-weight: 500; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 9px; padding: 0 6px; line-height: 17px; }
.plsetnavbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* A fleet's settings: the nav's two headings, and a machine's line with its dot and what it is doing. */
.plsetnavhead { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 2px; }
.plsetnavhead:first-child { padding-top: 2px; }
.plsetnavnote { font-size: 12px; color: var(--muted); padding: 2px 10px 6px; }
.plsetmach { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: center; column-gap: 8px; min-width: 0; }
.plsetmachname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plsetmachnote { grid-column: 2; font-size: 11px; color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plfielddiff { font-size: 12px; color: var(--warn); margin-top: 4px; }
.plsetpages { min-width: 0; }
.plsetpage[hidden] { display: none; }
.plsetpagename { font-size: 16px; font-weight: 600; margin: 2px 0 2px; }
.plsetpagenote { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.plsetpage .plfield[hidden] { display: none; }
.plsetpages .plugin-grant { display: grid; gap: 8px; max-width: 560px; }
.plsetpages .plugin-grant h3 { display: none; }
@media (max-width: 720px) {
  .plsetlayout { grid-template-columns: minmax(0, 1fr); }
  .plsetnav { position: static; }
  .plsetnavlist { flex-direction: row; overflow-x: auto; }
  .plsetnavbtn { white-space: nowrap; }
}

/* A plugin's Controls page in its settings: each control with what it does, its button at the end. */
.plsetcontrols { display: grid; gap: 10px; max-width: 680px; }
.plsetcontrol { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.plsetcontroltext { flex: 1; min-width: 0; }
.plsetcontrolname { font-weight: 600; font-size: 13px; }
.plsetcontrolnote { font-size: 12px; color: var(--muted); margin-top: 2px; }
.plsetcontrol > button { flex: none; height: 30px; padding: 0 14px; }
/* The settings form's pages and foot leave with it on the other pages: the form's own display beat the hidden attribute. */
.plugin-dialog-body form[hidden] { display: none; }
/* One height on every page, the page scrolling inside it, so the dialog does not jump about as pages change. */
dialog.plugin-dialog.plsetwide .plsetlayout { height: min(72vh, 700px); min-height: 0; }
dialog.plugin-dialog.plsetwide .plsetpages { overflow-y: auto; min-height: 0; padding-right: 4px; }
dialog.plugin-dialog.plsetwide .plsetnav { overflow-y: auto; max-height: 100%; }
dialog.plugin-dialog.plsetwide .plsetfoot { bottom: 0; margin: 0; padding: 12px 0; }
/* A phone: the dialog fills the screen's height, the search and the page names stay at the top, and only the settings
   scroll, above their Save bar (with the dialog scrolling as a whole, the bar floated over the settings below it). */
@media (max-width: 720px) {
  dialog.plugin-dialog.plsetwide .plsetlayout { height: calc(100dvh - 140px); grid-template-rows: auto minmax(0, 1fr); }
  dialog.plugin-dialog.plsetwide .plsetpages { overflow-y: auto; }
}

/* Your computers (docs/personal-machines-plan.md). */
#computersbox > button { align-self: flex-start; margin: 8px 0; }
.computer { border-top: 1px solid var(--line, #8884); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.computer .ok { color: var(--ok, #2a8a4a); }
.computersub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.computeraddsub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.computeradd { display: flex; flex-direction: column; gap: 6px; }
.computeradd > button { align-self: flex-start; }
.computeradd .machinecmd { white-space: pre-wrap; word-break: break-all; margin: 0; }
.enrolcode { font-size: 1.4em; letter-spacing: 0.08em; }

/* An artifact an agent published (docs/artifacts-plan.md): a card in the conversation, and the same card in a dialog. */
.artifact-card { margin: 10px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; max-width: 100%; }
.artifact-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
.artifact-badge { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.artifact-titles { flex: 1 1 180px; min-width: 0; }
.artifact-title { font-weight: 600; overflow-wrap: anywhere; }
.artifact-meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.artifact-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.artifact-btn { font-size: 13px; padding: 4px 8px; }
.artifact-desc { padding: 0 12px 8px; color: var(--muted); font-size: 13px; }
.artifact-problem { padding: 8px 12px; color: var(--bad); font-size: 13px; border-top: 1px solid var(--line); }
.artifact-view { border-top: 1px solid var(--line); }
.artifact-view:empty { display: none; }
.artifact-frame { display: block; width: 100%; height: 440px; border: 0; background: #fff; }
.artifact-pdf .artifact-frame { height: 600px; }
.artifact-big .artifact-frame { height: 80vh; height: 80dvh; }
.artifact-img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; cursor: zoom-in; background: #fff; }
.artifact-md { padding: 4px 14px; max-height: 70vh; overflow: auto; }
.artifact-text { margin: 0; padding: 10px 12px; max-height: 60vh; overflow: auto; background: var(--code); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-table-wrap { max-height: 60vh; overflow: auto; }
.artifact-table { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
.artifact-table th, .artifact-table td { border-bottom: 1px solid var(--line); padding: 4px 10px; text-align: left; white-space: nowrap; }
.artifact-table th { position: sticky; top: 0; background: var(--panel); }
.artifact-more { padding: 6px 12px; font-size: 12px; color: var(--muted); }
.artifact-dialog { width: min(1000px, calc(100vw - 32px)); }
.artifact-dialog .artifact-card { margin: 0; }

/* Artifacts lists (docs/artifacts-plan.md, stage 2): the sidebar's, a conversation's view, and the dialog's parts. */
.artdot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); opacity: 0.75; }
.artdot.art-table, .artdot.art-text { background: var(--ok); }
.artdot.art-image, .artdot.art-pdf { background: var(--warn); }
.artdot.art-file { background: var(--muted); }
.artscope { width: 100%; }
.artusage { padding: 0 14px 6px; font-size: 12px; color: var(--muted); }
.artifactspane { padding: 6px 0; }
.artifact-from { font-size: 13px; color: var(--muted); margin: 0 0 10px; overflow-wrap: anywhere; }
.artifact-versions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; }
.artifact-vlabel { font-size: 12px; color: var(--muted); margin-right: 4px; }
.artifact-versions .artifact-btn.active { border-color: var(--accent); color: var(--accent); }
.artifact-deleted { padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.artifact-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.artifact-footnote { flex: 1 1 200px; font-size: 12px; color: var(--muted); }

/* Sharing an artifact (docs/artifacts-plan.md, stage 3). */
.artifact-sharing { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 10px 0 0; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.share-dialog { width: min(620px, calc(100vw - 32px)); }
.sharehead { font-size: 14px; margin: 14px 0 4px; }
.sharehead:first-child { margin-top: 0; }
.sharenote { font-size: 13px; color: var(--muted); margin: 4px 0; }
.sharerow { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.sharerow .grow { flex: 1 1 200px; min-width: 0; }
.sharecheck { cursor: pointer; font-size: 14px; }
.sharelink { border-top: 1px solid var(--line); padding: 6px 0; }
.sharelink.dead { opacity: 0.6; }
.shareurl { font-family: ui-monospace, monospace; font-size: 12px; }
.sharewarn { border: 1px solid var(--warn); border-radius: var(--radius); padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.sharewarn p { margin: 4px 0; }
.sharewarnhead { font-weight: 600; }
.sharecaution { margin: 6px 0; padding-left: 18px; color: var(--bad); }

/* Search this conversation (⇧⌘F): a small bar floating at the top right of the conversation, over its sticky header, as an
   editor's find widget does; the matches marked with the Highlight API. */
.convfind {
  position: absolute; top: 8px; right: 20px; z-index: 8; display: flex; align-items: center; gap: 4px;
  padding: 5px 6px 5px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); width: min(420px, calc(100% - 40px));
}
.convfind[hidden] { display: none; }
.convfind input { flex: 1; min-width: 0; }
.convfind button { padding: 2px 7px; }
.convfindcount { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; }
::highlight(convfind) { background-color: rgba(255, 214, 0, .55); color: inherit; }
::highlight(convfind-now) { background-color: rgb(255, 150, 0); color: #000; }

/* Keyboard shortcuts (⌘/): one grid, so the keys line up across the groups. */
dl.shortcuts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; align-items: baseline; }
dl.shortcuts dt.group { grid-column: 1 / -1; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 10px; }
dl.shortcuts dt.group:first-child { margin-top: 0; }
dl.shortcuts dt:not(.group) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; white-space: nowrap; }
dl.shortcuts dd { margin: 0; }

/*
 * Printing (⌘P; the Mac app first loads the whole conversation): the conversation alone, at its full length. Everything
 * holding the transcript lets it grow, and everything beside it is left out.
 */
@media print {
  :has(#transcript) { display: block !important; position: static !important; height: auto !important; max-height: none !important; overflow: visible !important; width: auto !important; }
  :has(#transcript) > :not(:has(#transcript)):not(#transcript) { display: none !important; }
  #transcript { overflow: visible !important; height: auto !important; padding: 0 !important; }
  #earlierbar, .stickyprompt, .tooljump, .stepsum { display: none !important; }
  .turn { break-inside: avoid-page; }
  /* A printer drops backgrounds, which left a person's white words on nothing: theirs print as ink in an outline. */
  .turn.user .body { background: none !important; color: #000 !important; border: 1px solid #999 !important; }
  .turn.user .body.md a, .turn.user .body.md code { color: #000 !important; }
}

/* A panel's filter over all its tables (a fleet's: the machine). */
.plfilter { height: 30px; margin: 2px 0 8px; max-width: 100%; }
/* A fleet's machines: a line each, its name, the plugin's word on it and four small meters; a line filters the list. */
.plfleet { display: grid; gap: 1px; padding: 6px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 12px; }
.plfhead, .plfrow { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) repeat(3, 76px) 54px; align-items: center; gap: 12px; padding: 3px 8px; }
.plfhead { color: var(--muted); padding-bottom: 4px; }
.plfhead .plfsel { height: 26px; margin: 0; font-size: 12px; grid-column: 1 / 3; justify-self: start; max-width: 100%; }
.plfhead .plfcol { font-size: 11px; }
.plfheadname { grid-column: 1 / 3; }
.plfrow { font: inherit; color: var(--ink); text-align: left; background: none; border: 0; border-radius: 6px; width: 100%; }
button.plfrow { cursor: pointer; }
button.plfrow:hover { background: var(--code); }
.plfrow.on { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.plfrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.plfrow.stale .plfm { opacity: .55; }
.plfname { display: flex; align-items: center; gap: 7px; font-weight: 600; min-width: 0; }
.plfname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plfdot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .6; }
.plfdot.on { background: var(--ok); opacity: 1; }
.plfnote { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plfnote.ok { color: var(--ok); } .plfnote.warn { color: var(--warn); } .plfnote.bad { color: var(--bad); }
.plfm { display: grid; gap: 2px; color: var(--muted); }
.plfm b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.plfm b.warn { color: var(--warn); } .plfm b.bad { color: var(--bad); }
.plfm .plmeterbar { height: 3px; }
/* Sized by the panel, not the window: a panel beside a conversation is narrow on any screen. There a machine is two short
   lines, its name and meters, then what it is doing. */
.plfleet { container-type: inline-size; }
@container (max-width: 620px) {
  .plfhead, .plfrow { grid-template-columns: minmax(0, 1fr) 44px 44px 62px; column-gap: 10px; row-gap: 0; }
  .plfrow { padding: 4px 8px; }
  .plfrow .plfname { grid-column: 1; grid-row: 1; }
  .plfrow .plfnote { grid-column: 1 / -1; grid-row: 2; font-size: 11px; padding-left: 14px; }
  .plfm.agents, .plfcol.agents { display: none; }
  .plfhead .plfsel, .plfheadname { grid-column: 1; }
  .plfhead .plfsel { width: 100%; }
}