/* --- Status bar --- */
#status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 2px 16px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-height: 20px;
}
/* An UNFILLED SLOT costs no gap: a reading the relay has not sent yet (context,
   limits) collapses instead of leaving a hole in the row.
   `.keep-dot` is the exception, and the only one so far: it is a SHAPE and not a
   slot — the filled/hollow mark on the keep-container chip (11-update-banner.css)
   — so it is empty for ever and by design. Written as :not() here rather than as
   a louder selector over there, because the exception belongs with the rule it is
   an exception to, and `span:empty` already out-specifies an id plus a class. */
#status-bar span:empty:not(.keep-dot) { display: none; }
/* Why the queue is stuck (status-bar.js): a whole line of the wrapping bar, so
   a sentence never squeezes the three groups of readings above it, and red
   because it is the one thing in this bar that is WRONG rather than set. Empty
   for all but the minute or two it is true of, and the rule above collapses it
   then — including its share of the row gap. */
#status-waiting {
  /* `width`, not `flex-basis`: the bar is a ROW on a desktop and a COLUMN on a
     phone (11-update-banner.css), and a basis of 100% means the width in one and
     the HEIGHT in the other — which gave the phone a line as tall as the whole
     panel with its text hanging off the right. A width works in both: it takes
     the row's full span, so it wraps onto a line of its own, and on the phone it
     is simply the column's width. */
  flex: 0 0 auto;
  width: 100%;
  color: var(--red);
  white-space: normal;
}
#status-bar > div:empty { display: none; }
.status-left, .status-middle, .status-right {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 0;
}
.status-left { justify-content: flex-start; overflow: hidden; }
/* A part that has given up its text — see fitStatusLeft, which adds these one
   at a time until the row fits. The mark stays, and so does the title on it, so
   a collapsed part is still answerable by hovering it. */
.status-left.collapse-cwd #status-cwd .t,
.status-left.collapse-branch #status-branch .t { display: none; }
.status-left.collapse-tail #status-cwd-tail { display: none; }
/* Collapsed down to a mark, it stops being a candidate for shrinking: the whole
   point was to free width, and a 13px icon has none to give. Without this the
   part keeps its shrink factor and the row squeezes the mark instead of the
   next part's text. */
.status-left.collapse-cwd #status-cwd,
.status-left.collapse-branch #status-branch { flex: 0 0 auto; }
/* The gap between a mark and its text belongs to the text, so it goes when the
   text does rather than leaving the mark padded on one side. */
#status-cwd .t,
#status-branch .t { margin-left: 4px; }
/* Clipped for the same reason the left column is: `flex: 1 1 0` gives it a third
   of the bar whatever it holds, and its contents grew past that — an account
   with three rate-limit windows plus a model and its knobs. Overflowing visibly
   doesn't degrade, it collides, printing the run row on top of the toggles to
   its right. The header pills carry the same readings in full. */
.status-middle { justify-content: center; overflow: hidden; }
.status-right { justify-content: flex-end; }
/* The same collapse, per column, with the same exception — see above. */
.status-left span:empty:not(.keep-dot),
.status-middle span:empty:not(.keep-dot),
.status-right span:empty:not(.keep-dot) { display: none; }
/* The directory row is two parts either side of the ⑂: the session's own cwd,
   then the tail down to the worktree the agent is really in. The tail is the new
   information — it is the whole point of showing this — so it keeps the
   foreground colour the bar's muted text sits against, and it is the ROOT that
   ellipsises when the row runs out of room. */
#status-cwd {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* Nothing in this row shrinks — see fitStatusLeft, which is what decides who
     gives way now. The parts used to be ordered by shrink factor, the root three
     times faster than the tail, and that failed twice over: a row whose children
     shrink never reports overflow, so nothing could measure whether it fit, and
     a part squeezed to a sliver frees a sliver when its text goes. Holding their
     natural width makes both true instead: the row overflows honestly, and
     collapsing a part gives back all of it. */
  flex-shrink: 0;
}
#status-cwd-tail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 0;
  color: var(--text);
}
/* The badge's inline margin is for the sidebar, where it trails a name. Here it
   is a flex item with the row's own gap on both sides, and the extra would put
   the seam off-centre. */
#status-worktree { margin-left: 0; }

/* It does not give way at all. A session name is the one thing in this row you
   cannot reconstruct from anywhere else on screen — the path heads every `cd` in
   the transcript, the branch is on the card — so the row loses text from the
   parts that repeat themselves, in the order fitStatusLeft sets out, and never
   from this.
   The ellipsis stays for the one case left: all three collapsed and the name
   alone still wider than the column. Nothing can be done about that one, and
   showing part of the name beats showing part of the row. */
#status-session {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.01em;
}
#status-branch {
  font-family: var(--mono);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 2px;
}
@media (hover: hover) { #status-branch:hover { background: var(--bg-hover); } }
/* A non-root viewpoint is pinned. The accent IS the marker now — there is no
   pin glyph any more, in front of the label or inside it. The branch mark has to
   stay the same in every session to be read as furniture rather than as news,
   and this state already has the title to spell it out. */
#status-branch.viewpoint-pinned { color: var(--accent); }

/* Worktree viewpoint picker — a floating menu above the status bar. */
.worktree-picker {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  max-width: min(420px, 90vw);
  max-height: 50vh;
  overflow-y: auto;
  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;
}
.worktree-pick-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 13px;
}
@media (hover: hover) { .worktree-pick-item:hover { background: var(--bg-hover); } }
.worktree-pick-item.current { color: var(--accent); }
.worktree-pick-item .wp-check { width: 12px; flex-shrink: 0; color: var(--accent); }
.worktree-pick-item .wp-branch { font-family: var(--mono); white-space: nowrap; }
.worktree-pick-item .wp-path {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.worktree-pick-item .wp-tag {
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  flex-shrink: 0;
}
.worktree-pick-item .wp-tag.wp-agent {
  color: var(--accent);
  border-color: var(--accent);
}
.worktree-pick-empty { padding: 8px 10px; color: var(--text-muted); font-size: 12px; }
.git-pill {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: default;
  margin-left: 4px;
}
#status-dirty.git-dirty {
  color: var(--orange);
  border-color: var(--orange);
  cursor: help;
}
#status-ahead.git-has {
  color: var(--green);
  border-color: var(--green);
}
#status-behind.git-has {
  color: var(--blue);
  border-color: var(--blue);
}
.dash-git {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange);
  /* No `margin-left: 4px` any more: it was the gap after the branch name inside
     one span, and the pills are their own flex item in the row now, spaced by
     the row's own `gap`. Kept as a margin it would have read as 12px there. */
  white-space: nowrap;
  /* The BRANCH is what gives way, not these. A branch name shortened to
     `codex/app-simpl…` is still recognisable — it is a word, and the part you
     read first is the part that identifies it. `●12 ↑3 ↓2` shortened is
     `●12 ↑…`, which is not a smaller truth but a different one: a reader cannot
     tell whether the hidden part said ↑3 or ↑30, and cannot tell that ↓2 existed
     at all. Numbers do not abbreviate.
     Held to the right end of its row by the same auto margin the header banner's
     ✕ uses, so the counts sit under the date above them. */
  margin-left: auto;
  flex-shrink: 0;
}

/* --- Tool-call grouping — runs of consecutive tool calls inside a
   finished turn collapse into a single header for compactness.
   Individual tool calls inside keep their own per-call expand
   chevron (rendered by renderToolUse), so the grouping is purely
   outer-level collapse. */
.tool-group {
  margin: 4px 0;
  border-left: 2px solid var(--border);
  padding-left: 6px;
}
.tool-group-header {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  user-select: none;
}
.tool-group-header .arrow {
  display: inline-block;
  transition: transform 0.15s;
  font-size: 9px;
  /* 10, the width of the chevron inside it (see .icon-xs); at 8 the mark was
     wider than the box holding it. */
  width: 10px;
  flex-shrink: 0;
}
.tool-group:not(.collapsed) .tool-group-header .arrow { transform: rotate(90deg); }
.tool-group-count {
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.tool-group-names {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.tool-group-body { padding: 2px 0; }
.tool-group.collapsed .tool-group-body { display: none; }
/* A card that shows a picture is left standing outside the group its neighbours
   fold into ("Pictures stay unfolded", groupToolCalls). A .tool-group insets
   what it holds by exactly 8px — the 2px rule plus 6px of padding above — so
   without this the one card that stayed out would be 8px wider than every card
   above and below it, and a run with a screenshot in it would step in and out.
   Measured at 1280 and 390: the same width and the same left edge as a card
   inside an open group (tests/e2e/tool-group.spec.ts). */
.picture-unfolded { margin-left: 8px; }
@media (hover: hover) {
  .tool-group-header:hover { color: var(--text); }
}