/* --- Prompt buttons bar (directly above input) --- */
#prompt-buttons-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.prompt-list {
  display: flex;
  flex: 1;
  /* One line, whatever it holds. Wrapping turned a 37px strip into as many rows
     as the library is long — measured at 900px: 8 buttons made it 67, 12 made it
     97, 20 made it 127 — and it spent the chat's height to show buttons nobody
     had asked to see, moving everything under the cursor as the list changed.
     Sideways instead, exactly as #composer-sections and .status-right do.

     `min-width: 0` is what makes that possible rather than a nicety: a flex
     item's automatic minimum is its own content, so without it this list refuses
     to shrink below the buttons and spills out of the bar with nothing to
     scroll. Measured after: at 900px with 20 buttons the list is 545 wide and
     its scrollWidth is 1881, and the bar is 37. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 6px;
  min-width: 0;
  /* Hidden, like the other two rows that scroll sideways: the bar is 37px tall
     and a scrollbar would be a visible fraction of it. */
  scrollbar-width: none;
}
.prompt-list::-webkit-scrollbar { display: none; }
/* A hairline between two groups sharing one row — here the prompt library and
   the jobs mark that follows it. An element rather than a border on whichever
   thing happens to come next, so it can be moved, hidden or reused without the
   groups either side knowing about each other; the mobile bar draws the same
   line between its cells, but as a border, which only works because those cells
   are all one component. */
.row-divider {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 2px 0;
  background: var(--border);
}
.prompt-btn {
  /* Or they would answer the squeeze by getting narrower — which is the same
     ellipsis on every label instead of a swipe to the ones off the end. */
  flex-shrink: 0;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, border-color 0.15s;
  /* The hold (see promptButton) must not trip the platform's own long-press
     behaviour: Android's context menu is suppressed in JS, and this is the CSS
     half — no text selection, no iOS callout. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (hover: hover) {
  .prompt-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
}
/* What a hold on a chip opens (promptButton): one button, above the row, built
   by openBarPopover. Dressed like .card-menu, the other sheet that helper
   draws. The button is pressed with the thumb that just held the chip, so it
   gets the 44px a coarse pointer gets everywhere else — at any pointer, since
   only a touch can open this. */
.prompt-hold-menu {
  position: fixed;
  z-index: 60;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  padding: 4px;
}
.prompt-hold-insert {
  display: block;
  min-height: 44px;
  padding: 0 20px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.prompt-hold-insert:active { background: var(--bg-hover); }
@media (hover: hover) {
  .prompt-hold-insert:hover { background: var(--bg-hover); }
}
/* The phone row's targets, by the rule .composer-section already follows: a
   coarse pointer gets 44px, because these are pressed with a thumb. Height on
   the chip, both dimensions on the gear — a wider gear would only take the
   width out of the chips. */
@media (pointer: coarse) {
  .prompt-btn { min-height: 44px; padding: 8px 14px; font-size: 13px; }
  .prompt-edit { min-width: 44px; min-height: 44px; }
}
/* The gear alone now: #preset-btn moved to the group past the divider and wears
   .composer-section there, with the jobs mark it stands next to.
   It is the list's LAST BUTTON, inside the scroller — the end of the row of
   prompts rather than a fixture beside it. With a library longer than the screen
   it is the last thing the sideways swipe reaches; with two buttons it sits just
   past them. Alone — a session with no prompts yet — it keeps the right-hand
   corner it has always had, because there is no row for it to be at the end
   of. */
.prompt-edit {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.prompt-list .prompt-edit:only-child { margin-left: auto; }
@media (hover: hover) {
  .prompt-edit:hover { color: var(--accent); border-color: var(--accent); }
}

/* --- The phone's prompt row --- */
/* The same list and gear the bar above holds, on the screen that has no room
   for the marks beside them: #prompt-buttons-bar is hidden under 768px, and
   this row is what the prompts mark switches there instead (isBarToggle). It
   stands where that bar stands — directly above the box — and wears the same
   dressing: the same surface, border and padding, the same `.prompt-list`
   between them, the same `.prompt-edit` at the end. Only the switch differs:
   its own class, `bar-on-promptRow`, because the phone's row is a setting of its
   own (SECTION_TOGGLES_BAR). */
#prompt-row { display: none; }
@media (max-width: 768px) {
  /* The switch, the same way up as the six in 06-services.css: AWAY BY DEFAULT,
     and the class is what puts it up. The phone's row used to start on screen
     and was written the other way up for it; it joined the other six. The gear
     goes away with the row — it is the row's far end, reachable once the mark
     has put the row up, exactly as a chip in any of the six is. */
  body.in-chat.bar-on-promptRow #prompt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
}

/* --- Prompt buttons editor dialog --- */
#prompt-buttons-dialog { min-width: 480px; max-width: 600px; }
/* This is the one dialog that sets a width of its own, and a flat 480px floor
   beat every max-width — on a phone it rendered wider than the screen with its
   Close button past the edge, and a modal you cannot close is a modal you can
   only escape by reloading. The shared bound on `dialog` cannot reach it (an
   element selector against an id), so it opts back in here. Left untouched
   above the breakpoint, where 480–600px is what it has always been. */
@media (max-width: 768px) {
  #prompt-buttons-dialog { min-width: 0; max-width: calc(100vw - 32px); }
}
#prompt-buttons-editor-list {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
#prompt-buttons-editor-list:empty::after {
  content: "No buttons yet — add your first below.";
  display: block;
  padding: 12px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.prompt-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.prompt-btn-row:last-child { border-bottom: none; }
.prompt-btn-row-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  flex-shrink: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-btn-row-prompt {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-btn-row-reorder {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.prompt-btn-row-reorder button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  padding: 1px 4px;
  border-radius: 3px;
}
.prompt-btn-row-reorder button:disabled {
  opacity: 0.25;
  cursor: default;
}
@media (hover: hover) {
  .prompt-btn-row-reorder button:not(:disabled):hover {
    color: var(--accent);
    background: rgba(78,168,222,0.1);
  }
}
.prompt-btn-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.prompt-btn-row-actions button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
}
@media (hover: hover) {
  .prompt-btn-row-edit:hover { color: var(--accent); background: rgba(78,168,222,0.1); }
  .prompt-btn-row-remove:hover { color: var(--red); background: rgba(239,83,80,0.1); }
}
.prompt-button-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.prompt-button-form input,
.prompt-button-form textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}
.prompt-button-form textarea {
  font-family: var(--mono);
  font-size: 12px;
  resize: vertical;
  min-height: 80px;
}
.prompt-button-form input:focus,
.prompt-button-form textarea:focus { border-color: var(--accent); outline: none; }
.prompt-button-hint {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
  margin: -2px 0 0;
}
.prompt-button-hint code {
  font-family: var(--mono);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 3px;
}

/* Token-fill dialog: one labelled textarea per [[token]] in a clicked prompt. */
#prompt-fill-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  max-height: 60vh;
  overflow-y: auto;
}
.prompt-fill-field { display: flex; flex-direction: column; gap: 4px; }
.prompt-fill-q { font-size: 13px; color: var(--text); white-space: pre-wrap; }
.prompt-fill-field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 44px;
}
.prompt-fill-field textarea:focus { border-color: var(--accent); outline: none; }

.prompt-button-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.prompt-button-form-actions button {
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  background: var(--accent);
  color: var(--bg);
  border: none;
  font-size: 13px;
}
.prompt-button-form-actions button:hover { background: var(--accent-hover); }
#prompt-button-form-cancel { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
#prompt-button-form-cancel:hover { background: var(--bg-hover); }

.pin-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-surface2);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}
.pin-chip-icon { flex-shrink: 0; color: var(--accent); }

/* The mark that LEADS a chip, in both rows. It is not a control — it answers
   "what is this row", which is a job the text does, so it is sized by the text:
   the default .icon is 1em, and at the chip's 13px that measures 13. It was
   .icon-xs, which is 10 and is called the disclosure size in as many words —
   right for the ✕ and the two buttons beside it, which ARE controls and stay
   there, and too quiet for the one thing that says what you are looking at.
   The stroke is .icon-sm's rather than .icon's: 13px is exactly the size that
   class exists for, and its whole argument (see it) is that the default weight
   renders thin there — 1.08px against the 1.42px every other 13px mark in this
   app puts on screen. Sized by the type, weighted like its neighbours. */
.pin-chip-icon .icon,
.wake-chip-icon .icon { stroke-width: 2.6; }
.pin-chip-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* Chip-sized, and nothing else of its own: everything about how it looks is
   .send-circle, which the composer's Send wears too. */
.pin-chip-send { --send-size: 22px; }
/* Send AND unpin. The same 22px circle and the same arrow as its neighbour,
   because it is the same act — what is added is the ✕ badge on its corner,
   which says what ELSE happens, in the mark this chip already spends on exactly
   that: .pin-chip-remove at the other end is an ✕ and means "out of the pins".
   The badge hangs half over the circle's edge and is filled with the CHIP's own
   background, so it reads as a bite taken out of the circle rather than a spot
   on it — at this size a mark drawn inside the circle would have had to be
   smaller still.
   Why a badge and not a struck-through pin, which was the other candidate:
   measured. The glyph in this circle is 11px (.send-circle sets font-size at
   half the diameter), and the sprite's pin is 11 units wide by 10.5 tall on a 24
   grid — 5.0 x 4.8px at 11px, with interior daylight of about 3 units, 1.4px.
   The weight every small mark in this app puts on screen is ~1.42px (.icon-sm
   and .icon-xs are both tuned to it), so a pin drawn to match would close its
   own interior exactly, before the slash across it takes any more. The ✕ has no
   interior to lose: two strokes, 9px, stroke-width 3.8 → 1.43px rendered, which
   is that same weight. */
.pin-chip-send-unpin {
  --send-size: 22px;
  position: relative;
  overflow: visible;
}
.pin-chip-unpin-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-surface2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-chip-unpin-badge .icon { width: 9px; height: 9px; stroke-width: 3.8; }
.pin-chip-insert, .pin-chip-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
@media (hover: hover) {
  .pin-chip-insert:hover { color: var(--accent); background: rgba(78,168,222,0.1); }
  .pin-chip-remove:hover { color: var(--red); background: rgba(239,83,80,0.1); }
}
/* Pin and resend, two of the actions a message of your own carries. They stand
   in the chrome line under the bubble (.msg-chrome, 14-saved.css) and are
   `.msg-copy`s, so the box, the size, the colour and the reveal all come from
   there and the only thing left to say here is what each one means in colour:
   blue for keeping a message, green for sending it again. That is the same pair
   the pin chips above use.
   Written under `(hover: hover)` and only there, which is where the line is
   drawn at all: on touch these two are rows in the `⋯` menu instead, and both
   the `⋯` and that menu are dressed in 14-saved.css beside the line they stand
   in for.
   Both marks come from the sprite at .icon-sm — the pin has always been an
   i-pin, and the ↻ that was a text glyph on a ::before is now i-refresh, which
   is what makes it the copy button's size instead of a character's. */
@media (hover: hover) {
  .pin-msg-btn:hover { color: var(--accent); background: rgba(78,168,222,0.1); }
  .resend-msg-btn:hover { color: var(--green); background: rgba(76,175,80,0.1); }
}
.queue-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-surface2);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.queue-chip-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Why the head of the queue is still the head, when the relay knows (renderQueue
   in subagents-mark.js). A line under the text rather than a part of it — the
   chip wraps for it — because the text is the person's words and this is the
   relay talking about them. Red for the same reason #status-waiting is: it says
   something is wrong, not something is set. */
.queue-chip-wait {
  flex: 1 0 100%;
  color: var(--red);
  font-size: 11px;
}
.queue-chip-remove,
.queue-chip-edit,
.queue-chip-pin {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
/* Pin and Edit keep the text, not destroy it — accent, not red. */
.queue-chip-edit,
.queue-chip-pin { filter: grayscale(1); opacity: 0.7; }
/* Send now — the only button on this chip that SENDS, and the only one that is
   not always there (subagents-mark.js queueStuck). So it is the one that carries
   its words: green like every other send in this app, and shrinkable, because at
   320px the four of them plus the message have one row to share and the text
   beside them is what should be giving way first — hence flex-shrink on the word
   alone and not on the ▶. */
.queue-chip-send {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--green); cursor: pointer;
  font-size: 12px; padding: 0 6px; flex-shrink: 0; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.queue-chip-send > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) {
  /* THE 8-10% HOVER WASHES STAY FROZEN, here and in the dozen rules like it, and
     it is a decision rather than an oversight — do not "fix" them on the next
     audit. Each is a wash of the SAME colour as the text on it, so following the
     variable makes the paper match the ink more exactly and costs contrast for
     it: measured across all eight themes and every one of these rules, 78 of 128
     readings fell, 27 rose, and two light-theme ones crossed 4.5 downward
     (inbox ✕ 4.60 -> 4.35, queue 📌 4.55 -> 4.31).
     And it buys nothing anyone can see: at 8-10% the painted tint moves at most
     11/255 in one channel, usually 6. A measurable loss for an invisible gain is
     the wrong way round. The same call, for the same reason and with the same
     kind of numbers, as the unread row's tint used to be — that tint is gone
     now (the active row owns the fill, and unread is the dot's size alone), but
     the reasoning stands wherever a frozen literal is doing the same job.
     The 35% subagent flash IS unfrozen — at that strength the colour is visible,
     which is exactly what makes it a different question. */
  .queue-chip-remove:hover {
    color: var(--red);
    background: rgba(239,83,80,0.1);
  }
  .queue-chip-edit:hover,
  .queue-chip-pin:hover {
    filter: none;
    opacity: 1;
    background: rgba(78,168,222,0.1);
  }
  /* Its own colour's wash, one of the frozen ones above. */
  .queue-chip-send:hover { background: rgba(76,175,80,0.1); }
}

/* Inbox notes — like the queue chip but a distinct amber, solid left accent, and
   a 📝 icon, so notes read clearly apart from queued turns. */
/* --- The owed row (above the input, desktop) ---------------------------------
   One chip per thing agency owes this session and has nowhere else to show it:
   a subagent report, a finished job's notice. The inbox chip's shape, because it
   is the same kind of object — a small thing waiting for you, with one act on
   it — and the left border is where its STATE goes rather than a fixed hue, so a
   row of these is read down the edge.
   Waiting is the quiet one and wears the border colour every bar here uses;
   held and parked take the two words this app already says them in (--text-muted
   and --orange, see .state-held / .state-parked), so a chip agrees with the same
   row in the sheet and with the mark above it. */
.owed-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}
.owed-chip.held { border-left-color: var(--text-muted); }
/* PARKED IS THE REASON THIS ROW EXISTS. It is the one state that will not
   resolve on its own, so it gets the tint as well as the edge — the same
   "look at this" --orange the mark above it wears via .section-attention, and
   the same one a parked delivery wears everywhere else. */
.owed-chip.parked {
  border-left-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 10%, var(--bg-surface2));
}
.owed-chip-icon { flex-shrink: 0; display: inline-flex; color: var(--text-muted); }
.owed-chip-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.owed-chip-state {
  flex-shrink: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.owed-chip-when {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
}
.owed-chip-drop {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) {
  .owed-chip-drop:hover { color: var(--red); background: rgba(239,83,80,0.1); }
}

.inbox-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, hsl(38, 90%, 48%) 10%, var(--bg-surface2));
  border: 1px solid var(--border);
  border-left: 3px solid hsl(38, 90%, 48%);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}
.inbox-chip-icon { flex-shrink: 0; font-size: 12px; }
.inbox-chip-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-chip-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
@media (hover: hover) {
  .inbox-chip-remove:hover { color: var(--red); background: rgba(239,83,80,0.1); }
}