.banner {
  margin: 6px 0 14px 0;
  border: 1px solid var(--divider);
  background: var(--sidebar-bg);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  /* The banner sits inside `.messages` (a `flex-direction: column`
     scroll container). Without an explicit `flex-shrink: 0` the
     banner could be vertically squeezed by sibling pressure when
     content briefly exceeded the viewport — collapsing the chip down
     to its border. The block must always reserve space for its
     content. */
  flex-shrink: 0;
  overflow: hidden;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

.banner:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.35);
}

.expanded {
  border-color: rgba(var(--accent-primary-rgb), 0.35);
  background: var(--chat-input-bg);
}

/* ── Header (always visible — collapsed pill) ── */

/* Non-interactive flex container with two sibling buttons (toggle + copy)
   so we don't nest <button> elements — see CliInvocationBanner.tsx for
   the rationale.

   `min-height` floor: with the chip's children able to shrink (the
   summary uses `min-width: 0` to let the toggle wrap rather than
   overflow), the header could collapse to almost-zero height under
   awkward layout conditions. The 32px floor matches the toggle's
   intrinsic height (chevron + icon at 14px each + padding) so the
   chip is always comfortably tappable and visually present even at
   high zoom. */
.header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 32px;
  padding: 4px 6px 4px 4px;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  border-radius: var(--radius-md);
}

.toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}

.chevron {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 140ms ease;
}

.chevronOpen {
  transform: rotate(90deg);
  color: var(--accent-primary);
}

.binaryIcon {
  flex-shrink: 0;
  color: var(--accent-primary);
}

.summary {
  font-family: var(--font-mono);
  color: var(--text-primary);
  /* Wrap rather than ellipsize: the summary line is the only header
     affordance the user sees while collapsed, so truncating it (the
     prior `nowrap` + `text-overflow: ellipsis` combo) hid the
     "claude · N flags" count when the chat panel narrowed or the
     UI zoom was bumped — and the user couldn't tell the banner had
     content past what was visible. Letting it wrap means the header
     grows to fit instead of vanishing. `overflow-wrap: anywhere`
     keeps long redacted flag values (URLs, paths) from overflowing
     the panel horizontally. */
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

.copyButton {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.copyButton:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

/* ── Expanded body ── */

.body {
  padding: 4px 12px 12px 30px;
  border-top: 1px dashed var(--divider);
  font-family: var(--font-mono);
  /* Match existing design language: fade in expanded content rather than
     a hard pop. Keeps the banner feeling like a single surface. */
  animation: cliBannerReveal 140ms ease-out;
}

@keyframes cliBannerReveal {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.binaryRow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 6px;
  border-bottom: 1px dashed var(--divider);
  margin-bottom: 6px;
}

.binaryName {
  color: var(--accent-primary);
  font-weight: 500;
}

.binaryPath {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.flagList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* `auto` for the flag name column lets all rows align on the value
     column so values form a clean vertical band even with varying flag
     name lengths. minmax(0, 1fr) lets long values truncate instead of
     overflowing the card. */
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 2px;
}

.flagRow {
  display: contents;
}

.flagRow > .flagName,
.flagRow > .flagValue,
.flagRow > .positionalLabel {
  padding: 2px 0;
}

.flagName {
  color: var(--accent-primary);
  white-space: nowrap;
}

.flagValue {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.flagValueRedacted {
  color: var(--text-faint);
  font-style: italic;
}

/* Empty value cell for boolean flags. Renders nothing visually but reserves
   the grid column so flags after a boolean stay aligned. */
.flagValueEmpty::before {
  content: "";
}

.flagRowPositional > .positionalLabel {
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap;
}

.flagRowPositional > .flagValue {
  color: var(--text-muted);
  font-style: italic;
}
