/* Container for the list */
.code-change-plan {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  font-family: 'Inter', sans-serif;
  counter-reset: step-counter;
}

/* Style for each list item */
.code-change-plan-step {
  background-color: #f7f9fc;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  position: relative; /* Required for absolute tooltip */
  counter-increment: step-counter;
}

/* Add a hover effect */
.code-change-plan-step:hover {
  background-color: #e6e9ef;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Step prefix before each item */
.code-change-plan-step::before {
  content: "Step " counter(step-counter) ".";
  font-size: 0.9rem;
  font-weight: bold;
  color: #3b82f6;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* Text content */
.code-change-plan-step p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
  flex: 1;
}

/* --- Updated Tooltip Styles --- */
.step-details-popdown {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 10px;
  padding: 10px;
  background-color: #ffffff; /* Lighter background, perhaps white or a very light grey */
  color: #333; /* Darker text for contrast on light background */
  border: 1px solid #e0e6ed; /* Border matching list items */
  border-radius: 8px; /* Matching border radius */
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Softer, slightly larger shadow */
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tooltip-action {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #333; /* Ensure action text is dark for readability */
}

.tooltip-file-path {
  font-family: monospace;
  font-size: 0.9em;
  color: #555; /* Slightly darker grey for filepath */
  border-top: 1px solid #e0e6ed; /* Lighter border for separation */
  padding-top: 5px;
  margin-top: 5px;
}

/* Icon colors remain the same for clear visual cues */
.create-icon {
  color: #28a745; /* Green for create */
}

.delete-icon {
  color: #dc3545; /* Red for delete */
}

.modify-icon {
  color: #ffc107; /* Yellow for modify */
}

.code-change-plan {
  overflow: visible;
  position: relative; /* ensures tooltip is positioned correctly */
}