/* ============================================================
   TIMELINE VIEW (swim-lanes) — per-agent lane grid.
   ============================================================ */
/* ── TIMELINE VIEW (swim-lanes) ─────────────────────── */
#tl-view{
  position:fixed;top:52px;left:0;right:0;bottom:0;
  background:var(--bg-deep);
  display:none;flex-direction:column;
  z-index:5;
}
body.view-timeline #tl-view{display:flex;}
/* Hide graph-only chrome in timeline mode */
body.view-timeline #c,
body.view-timeline #chips,
body.view-timeline #pillbar,
body.view-timeline #legend,
body.view-timeline #pb,
body.view-timeline #hint,
body.view-timeline #wf-panel,
body.view-timeline #drawer,
body.view-timeline #focus-back,
body.view-timeline #focus-label,
body.view-timeline #focus-label.show,
body.view-timeline .focus-label,
body.view-timeline #topbar-live,
body.view-timeline #tl{display:none !important;visibility:hidden !important;}
/* Hide heatmap (not needed) and labels in timeline mode, keep controls */
body.view-timeline #tl .tl-heatmap{display:none;}
body.view-timeline #tl .tl-labels{display:none;}
body.view-timeline #tl{border-top:1px solid var(--line-2);}

/* Header bar */
.tlv-head{
  min-height:44px;flex-shrink:0;
  display:flex;align-items:center;gap:var(--s-4);
  padding:8px var(--s-5);
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(10,14,26,.6),rgba(10,14,26,0));
  flex-wrap:wrap;
}
.tlv-title{font-size:11px;font-weight:600;color:var(--t-3);text-transform:uppercase;letter-spacing:.14em;flex-shrink:0;}
.tlv-count{font-size:12.5px;color:var(--t-2);font-family:var(--f-mono);flex-shrink:0;white-space:nowrap;}
.tlv-count b{color:var(--t-1);font-weight:600;}
.tlv-filters{margin-left:auto;display:flex;align-items:center;gap:6px;}
.tlv-chip{
  padding:4px 10px;border-radius:100px;
  background:var(--line-1);border:1px solid var(--line-2);
  font-size:11px;font-weight:500;color:var(--t-2);
  cursor:pointer;transition:all .15s;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:6px;
}
.tlv-chip:hover{border-color:var(--line-3);color:var(--t-1);}
.tlv-chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:#c7d2fe;}
.tlv-chip .sw{width:8px;height:8px;border-radius:2px;}

/* Body */
.tlv-body{
  flex:1;display:flex;min-height:0;
  position:relative;
}
/* Left: agent labels */
.tlv-labels{
  width:180px;flex-shrink:0;
  border-right:1px solid var(--line-2);
  background:rgba(10,14,26,.4);
  overflow:hidden;display:flex;flex-direction:column;
}
.tlv-labels-axis{
  height:26px;flex-shrink:0;
  border-bottom:1px solid var(--line-1);
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 12px;
  font-size:10px;color:var(--t-3);text-transform:uppercase;letter-spacing:.12em;font-weight:600;
}
.tlv-labels-list{flex:1;overflow-y:auto;overflow-x:hidden;}
.tlv-labels-list::-webkit-scrollbar{width:0;}
.tlv-lane-label{
  height:34px;flex-shrink:0;
  display:flex;align-items:center;gap:9px;
  padding:0 12px;
  border-bottom:1px solid var(--line-1);
  cursor:pointer;transition:background .15s;
}
.tlv-lane-label:hover{background:var(--line-1);}
.tlv-lane-label.active{background:var(--accent-soft);}
.tlv-lane-swatch{width:3px;height:20px;border-radius:2px;flex-shrink:0;}
.tlv-lane-info{min-width:0;flex:1;}
.tlv-lane-name{font-size:12.5px;color:var(--t-1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em;}
.tlv-lane-short{font-size:10px;color:var(--t-3);font-family:var(--f-mono);letter-spacing:.04em;text-transform:uppercase;margin-top:1px;}
.tlv-lane-count{
  flex-shrink:0;font-size:10px;color:var(--t-3);
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;margin-left:6px;
}
.tlv-lane-tool .tlv-lane-name{color:var(--t-2);font-weight:400;}
.tlv-lane-tool .tlv-lane-swatch{width:2px;height:14px;opacity:.7;}

/* Group headers */
.tlv-group-head{
  height:28px;flex-shrink:0;
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  cursor:pointer;user-select:none;
  transition:background .12s;
  position:relative;
}
.tlv-group-head::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--group-col, currentColor);
}
.tlv-group-head:hover{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));}
.tlv-group-caret{
  font-size:9px;color:var(--t-2);width:10px;flex-shrink:0;
  font-family:var(--f-mono);
}
.tlv-group-swatch{
  width:7px;height:7px;border-radius:2px;flex-shrink:0;
}
.tlv-group-label{
  flex:1;font-size:10.5px;font-weight:700;color:var(--t-1);
  text-transform:uppercase;letter-spacing:.14em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tlv-group-count{
  font-size:10px;color:var(--t-3);font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;font-weight:500;
}
.tlv-group-strip{
  height:28px;flex-shrink:0;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.tlv-lane-summary{opacity:.85;font-style:italic;}
.tlv-lane-summary .tlv-lane-name{font-style:italic;font-weight:400;color:var(--t-2);}
.tlv-lane-summary-strip{cursor:pointer;}

/* Right: lanes canvas */
.tlv-lanes-wrap{
  flex:1;min-width:0;position:relative;
  overflow:hidden;
}
.tlv-axis{
  height:26px;flex-shrink:0;
  border-bottom:1px solid var(--line-1);
  position:relative;
  font-family:var(--f-mono);
}
.tlv-axis-tick{
  position:absolute;top:0;bottom:0;
  display:flex;align-items:center;
  padding-left:6px;
  font-size:10px;color:var(--t-3);font-variant-numeric:tabular-nums;
  border-left:1px dashed var(--line-1);
}
.tlv-axis-tick.now{color:var(--ok);border-left-color:rgba(74,222,128,.35);font-weight:600;}
.tlv-lanes-scroll{
  position:absolute;top:26px;left:0;right:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;
}
.tlv-lanes-scroll::-webkit-scrollbar{width:8px;}
.tlv-lanes-scroll::-webkit-scrollbar-track{background:transparent;}
.tlv-lanes-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px;}
.tlv-lanes-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.12);}
.tlv-lane{
  height:34px;
  position:relative;
  border-bottom:1px solid var(--line-1);
  background-image:linear-gradient(90deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px);
}
.tlv-lane:hover{background-color:rgba(255,255,255,.02);}
.tlv-lane.active{background-color:rgba(129,140,248,.05);}
.tlv-lane-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(90deg,var(--line-1) 1px,transparent 1px);
  background-size:20% 100%;
  opacity:.5;pointer-events:none;
}
/* Heartbeat area chart */
.tlv-hb{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
  background-image:linear-gradient(90deg,var(--line-1) 1px,transparent 1px);
  background-size:20% 100%;
}
/* Event block on lane */
.tlv-ev{
  position:absolute;top:9px;bottom:9px;
  min-width:2px;
  border-radius:2px;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, opacity .15s;
  display:flex;align-items:center;
  padding:0 4px;
  overflow:hidden;
  font-size:9.5px;
  font-weight:500;
  color:rgba(255,255,255,.92);
  white-space:nowrap;text-overflow:ellipsis;
  letter-spacing:-.005em;
}
.tlv-ev:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 4px 14px rgba(0,0,0,.45);z-index:5;height:30px;top:3px;bottom:auto;}
.tlv-ev.future{opacity:.18;filter:grayscale(.7);}
.tlv-ev .ev-type{font-family:var(--f-mono);font-size:8.5px;opacity:.75;margin-right:3px;text-transform:uppercase;letter-spacing:.06em;display:none;}
.tlv-ev:hover .ev-type{display:inline;}
/* Dispatch marker (thin vertical line) */
.tlv-dispatch{
  position:absolute;top:4px;bottom:4px;
  width:2px;
  border-radius:1px;
  opacity:.7;
  pointer-events:none;
}

/* Playhead (shared vertical line across lanes) */
.tlv-playhead{
  position:absolute;top:0;bottom:0;
  width:1px;background:rgba(255,255,255,.6);
  pointer-events:none;z-index:10;
  box-shadow:0 0 8px rgba(255,255,255,.3);
}
.tlv-playhead::before{
  content:'';position:absolute;top:-3px;left:-4px;
  width:9px;height:9px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px rgba(129,140,248,.8);
}
body.playback .tlv-playhead{background:var(--warn);box-shadow:0 0 8px rgba(245,158,11,.55);}
body.playback .tlv-playhead::before{background:var(--warn);box-shadow:0 0 10px rgba(245,158,11,.8);}

/* Empty state */
.tlv-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--t-3);font-size:12.5px;letter-spacing:.02em;pointer-events:none;
}