.timeline-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 180px 220px auto; gap:12px; margin-bottom:18px; align-items:center; }
.timeline-toolbar input,.timeline-toolbar select { width:100%; }
.timeline-list { display:grid; gap:0; max-width:980px; }
.timeline-entry { display:grid; grid-template-columns:26px minmax(0,1fr); position:relative; }
.timeline-rail { position:relative; display:flex; justify-content:center; }
.timeline-rail::after { content:""; position:absolute; top:18px; bottom:-18px; width:1px; background:var(--line); }
.timeline-entry:last-child .timeline-rail::after { display:none; }
.timeline-dot { width:11px; height:11px; margin-top:18px; border-radius:50%; background:#8792a8; box-shadow:0 0 0 5px var(--bg); z-index:1; }
.timeline-source-message .timeline-dot { background:#64a8ff; }
.timeline-source-activity .timeline-dot { background:#70d9a3; }
.timeline-source-stage .timeline-dot { background:#ffbd66; }
.timeline-source-approval .timeline-dot { background:#c795ff; }
.timeline-source-cadence .timeline-dot { background:#ff7e7e; }
.timeline-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin:0 0 14px 8px; min-width:0; }
.timeline-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.timeline-card-head time { color:var(--muted); font-size:.76rem; white-space:nowrap; }
.timeline-badges { display:flex; flex-wrap:wrap; gap:7px; }
.timeline-source-badge,.timeline-event-badge { display:inline-flex; padding:4px 8px; border-radius:999px; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.timeline-source-badge { background:rgba(255,255,255,.07); color:var(--text); }
.timeline-event-badge { background:rgba(100,168,255,.1); color:#9ec5ff; }
.timeline-card h4 { margin:12px 0 5px; font-size:1rem; }
.timeline-card p { margin:0; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.timeline-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; color:var(--muted); font-size:.74rem; }
.timeline-empty { border:1px dashed var(--line); border-radius:16px; min-height:150px; display:grid; place-content:center; gap:6px; text-align:center; color:var(--muted); padding:28px; }
.timeline-empty strong { color:var(--text); }
.timeline-error { border-color:rgba(255,100,100,.35); }
@media (max-width:1000px) { .timeline-toolbar { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .timeline-toolbar { grid-template-columns:1fr; } .timeline-card-head { display:grid; } .timeline-card-head time { white-space:normal; } }