.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.left,
.right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.left {
  position: relative;
}

.settingsButton {
  /* Sits in the bar's 2ch left-padding gutter (plus a few px of the footer
     margin) so the mode label keeps its input-text alignment — the gear takes
     no flex space. The gutter alone (~15.6px) is narrower than the button, so
     the extra -6px buys a visible gap between the icon and the mode label
     instead of the two touching. font: inherit so the -2ch resolves against
     the same font as the bar's 2ch padding; the 2px padding is hit area, free
     since we're out of flow. */
  left: calc(-2ch - 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--muted-foreground);
  cursor: pointer;
}

.settingsButton:hover,
.settingsButton:focus-visible {
  color: var(--foreground);
}

.modeButton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.modeButton:hover .modeHint,
.modeButton:focus-visible .modeHint {
  color: var(--muted-foreground);
}

.modeLabel {
  font-size: 13px;
}

.modeDefault {
  color: var(--muted-foreground);
}

.modePlan {
  color: var(--success-color);
}

.modeAutoEdit {
  color: var(--warning-color);
}

.modeAuto {
  color: var(--warning-color);
}

.modeYolo {
  color: var(--error-color);
}

.modeHint {
  color: var(--muted-foreground);
  font-size: 12px;
}

.shortcutsButton {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--muted-foreground);
  cursor: pointer;
}

.shortcutsButton:hover,
.shortcutsButton:focus-visible {
  color: var(--foreground);
}

.modelButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.modelButton:hover .model,
.modelButton:focus-visible .model {
  color: var(--foreground);
  text-decoration: underline;
}

.model {
  color: var(--muted-foreground);
  font-size: 12px;
}

.contextButton {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.contextButton:hover .context,
.contextButton:focus-visible .context {
  color: var(--foreground);
  text-decoration: underline;
}

.context {
  font-size: 11px;
  color: var(--muted-foreground);
}

.goal {
  font-size: 12px;
  color: var(--agent-blue-500);
  white-space: nowrap;
}

.separator {
  color: var(--muted-foreground);
}

.taskPill {
  border: 0;
  border-radius: 0;
  padding: 0 4px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.taskPill:hover,
.taskPill:focus-visible {
  background: var(--muted-foreground);
  color: var(--background);
  outline: none;
}

.taskPill:disabled {
  cursor: default;
}

@media (max-width: 700px) {
  .settingsButton,
  .modelButton,
  .modeHint {
    display: none;
  }
}