/* Coding Agent run timeline styles */

.coding-run-timeline {
  display: grid !important;
  gap: 10px !important;
}

.coding-run-timeline-lanes {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.coding-run-timeline-lanes span,
.coding-run-timeline-empty,
.coding-run-timeline-context,
.coding-run-timeline-item {
  min-width: 0 !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.60) !important;
}

.coding-run-timeline-lanes span {
  display: grid !important;
  gap: 3px !important;
  min-height: 54px !important;
  align-content: center !important;
  padding: 7px !important;
  text-align: center !important;
}

.coding-run-timeline-lanes strong {
  min-width: 0 !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
}

.coding-run-timeline-lanes small,
.coding-run-timeline-context,
.coding-run-timeline-empty span,
.coding-run-timeline-item p,
.coding-run-timeline-item small {
  min-width: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

.coding-run-timeline-context {
  padding: 8px 10px !important;
}

.coding-run-timeline-empty {
  display: grid !important;
  gap: 5px !important;
  padding: 12px !important;
}

.coding-run-timeline-empty strong,
.coding-run-timeline-item strong {
  min-width: 0 !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

.coding-run-timeline-list {
  display: grid !important;
  gap: 8px !important;
}

.coding-run-timeline-item {
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px !important;
}

.coding-run-timeline-dot {
  width: 10px !important;
  height: 10px !important;
  margin-top: 4px !important;
  border-radius: 999px !important;
  background: rgba(113,113,122,.72) !important;
  box-shadow: 0 0 0 4px rgba(113,113,122,.12) !important;
}

.coding-run-timeline-item[data-kind="plan"] .coding-run-timeline-dot {
  background: #0071e3 !important;
}

.coding-run-timeline-item[data-kind="tool"] .coding-run-timeline-dot {
  background: #5856d6 !important;
}

.coding-run-timeline-item[data-kind="edit"] .coding-run-timeline-dot {
  background: #30b0c7 !important;
}

.coding-run-timeline-item[data-kind="test"] .coding-run-timeline-dot {
  background: #31d158 !important;
}

.coding-run-timeline-item[data-kind="review"] .coding-run-timeline-dot {
  background: #ff9f0a !important;
}

.coding-run-timeline-item[data-kind="approval"] .coding-run-timeline-dot {
  background: #bf5af2 !important;
}

.coding-run-timeline-item[data-kind="recovery"] .coding-run-timeline-dot,
.coding-run-timeline-item[data-status="blocked"] .coding-run-timeline-dot,
.coding-run-timeline-item[data-status="failed"] .coding-run-timeline-dot {
  background: #ff453a !important;
}

.coding-run-timeline-item-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

.coding-run-timeline-item-head span {
  min-width: 0 !important;
  max-width: 112px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.70) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}

.coding-run-timeline-item p {
  margin: 5px 0 3px !important;
}

@media (max-width: 680px) {
  .coding-run-timeline-lanes {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  .coding-run-timeline-lanes,
  .coding-run-timeline-item-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .coding-run-timeline-item-head span {
    max-width: none !important;
    text-align: left !important;
  }
}