/* ── Tick timeline bar bottom-center ─────────────────────────── */
#tick-timeline {
  position: fixed; bottom: 20px; left: 230px; right: 100px; z-index: 65;
  padding: 5px 12px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(13,34,64,0.92), rgba(5,15,30,0.95));
  border: 1px solid rgba(42,90,138,0.5); box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  font-size: 9px; color: #e0e0e0;
  transition: opacity 0.3s; opacity: 0; pointer-events: none;
}
#tick-timeline.visible { opacity: 1; pointer-events: auto; }
.tl-header { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.tl-tick { font-weight: 700; color: #60a5fa; font-size: 10px; }
.tl-phase-badge {
  font-size: 7px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.tl-phase-badge.thinking { background: rgba(96,165,250,0.3); color: #93c5fd; }
.tl-phase-badge.acting { background: rgba(250,204,21,0.3); color: #fde047; }
.tl-phase-badge.settling { background: rgba(74,222,128,0.3); color: #86efac; }
.tl-phase-badge.reviewing { background: rgba(168,85,247,0.3); color: #c4b5fd; }
.tl-phase-badge.resolving { background: rgba(251,146,60,0.3); color: #fdba74; }
.tl-detail { color: #94a3b8; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* Agent order dots */
.tl-agents { display: flex; gap: 3px; align-items: center; }
.tl-dot {
  width: 6px; height: 6px; border-radius: 50%; transition: all 0.2s;
  border: 1px solid rgba(255,255,255,0.1);
}
.tl-dot.pending { background: rgba(255,255,255,0.1); }
.tl-dot.active { background: #facc15; box-shadow: 0 0 4px rgba(250,204,21,0.6); transform: scale(1.3); }
.tl-dot.done { background: #4ade80; }
.tl-dot.done.failed { background: #f87171; }
.tl-agent-name { font-size: 8px; color: #94a3b8; margin-left: 3px; }
/* Phase steps for current agent */
.tl-steps { display: flex; gap: 1px; margin-top: 3px; }
.tl-step {
  flex: 1; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.06); transition: background 0.3s;
}
.tl-step.active { background: #60a5fa; animation: stepPulse 0.8s ease infinite; }
.tl-step.done { background: #4ade80; }
@keyframes stepPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.tl-step-labels {
  display: flex; margin-top: 1px;
}
.tl-step-labels span {
  flex: 1; text-align: center; font-size: 6px; color: #475569; text-transform: uppercase; letter-spacing: 0.2px;
}