.header {
  display: flex;
  min-width: 0;
  min-height: 52px;
  flex: 1 1 auto;
  align-items: center;
  gap: 0;
  padding: 8px 20px 8px 12px;
}

.content {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.workspaceIcon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--foreground);
}

button.workspaceIcon {
  cursor: pointer;
}

.workspaceIcon:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.workspaceIcon:hover {
  background: var(--accent);
}

.workspaceIcon svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.7;
}

/* The tooltip is the only place the workspace behind an icon-only trigger can
   be read, so it carries the name and the full path. */
.workspaceTooltip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The workspace's own name is the tooltip's subject, so it carries the weight
   and the size; the path below stays a quiet second line. */
.workspaceTooltipName {
  font-size: 13px;
  font-weight: 600;
}

.workspaceTooltipPath {
  color: var(--muted-foreground);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.action {
  position: relative;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

.action:hover,
.action:focus-visible,
.action[aria-pressed='true'] {
  background: var(--accent);
  color: var(--foreground);
  outline: none;
}

.action svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.7;
}

/* Same dot and cadence as the sidebar's background-running indicator, so one
   running task reads the same in both places. */
.activityDot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  color: var(--warning-color, #d29922);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
  animation: activityPulse 1.6s ease-in-out infinite;
}

@keyframes activityPulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
    opacity: 0.72;
    transform: scale(0.9);
  }

  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent);
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .activityDot {
    animation: none;
  }
}