/* ============================================================
   TIMELINE (heatmap mode) — controls bar, heatmap bars, selection
   handles, playhead, scrub, time labels, range picker.
   ============================================================ */
/* TIMELINE — two rows: controls on top, lanes below */
#tl{
  position:fixed;bottom:0;left:0;right:0;min-height:130px;
  background:rgba(5,7,15,.95);
  border-top:1px solid var(--line-2);
  z-index:200;display:flex;flex-direction:column;padding:10px var(--s-5) 14px;gap:8px;
}
.tl-row{display:flex;align-items:center;gap:var(--s-3);}
.tl-row-top{flex:0 0 auto;}
.tl-row-lanes{flex:1;}
.tl-left{display:flex;align-items:center;gap:var(--s-3);flex:1;min-width:0;}
.tl-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.tlb{width:28px;height:28px;border-radius:var(--r-sm);background:transparent;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t-2);font-size:13px;transition:all .15s;}
.tlb:hover{background:var(--line-1);color:var(--t-1);border-color:var(--line-3);}
.tlb.play{background:var(--accent-soft);border-color:var(--accent-line);color:#c7d2fe;}
.tlb.play:hover{background:rgba(129,140,248,.22);}
.tl-t{font-size:13.5px;color:var(--t-2);font-family:var(--f-mono);min-width:64px;font-variant-numeric:tabular-nums;}
.tl-live{color:var(--ok);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px;min-width:48px;letter-spacing:.06em;text-transform:uppercase;}
.tl-track{flex:1;position:relative;cursor:crosshair;display:flex;flex-direction:column;gap:4px;padding-top:2px;}

/* Heatmap band — 5+ family lanes stacked */
.tl-heatmap{
  border-radius:3px;position:relative;
  background:var(--bg-dim);
  display:flex;flex-direction:column;gap:2px;padding:3px 1px 3px 92px;
  min-height:22px;
}
.tl-lane{
  height:8px;position:relative;
  display:flex;gap:1px;align-items:stretch;
}
.tl-lane-label{
  position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);
  font-size:9.5px;font-weight:600;letter-spacing:.2px;white-space:nowrap;
  text-align:right;min-width:84px;opacity:.88;pointer-events:none;
}
.tl-bar{flex:1;border-radius:1.5px;background:transparent;transition:opacity .18s;pointer-events:none;}
.tl-heatmap .tl-playhead{left:calc(92px + (100% - 92px) * var(--ph,1));}
/* Selection handles — only visible in playback range mode */
.tl-sel-handle{
  position:absolute;top:-4px;bottom:-2px;width:5px;
  background:var(--warn);
  box-shadow:0 0 6px rgba(245,158,11,.55);
  cursor:ew-resize;
  display:none;
  z-index:4;
  border-radius:1px;
}
.tl-sel-handle::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:3px;height:10px;background:rgba(255,255,255,.9);border-radius:1px;
}
#tl.tl-past.tl-has-selection .tl-sel-handle{display:block;}
.tl-heatmap .tl-sel-l{left:calc(92px + (100% - 92px) * var(--sel-l,0) - 2px);}
.tl-heatmap .tl-sel-r{left:calc(92px + (100% - 92px) * var(--sel-r,1) - 3px);}
.tl-sel-handle:hover{background:#fbbf24;box-shadow:0 0 10px rgba(245,158,11,.8);}
/* Filter pill */
.tl-filter-pill{
  display:flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:var(--r-sm);
  background:var(--line-1);border:1px solid var(--line-2);
  font-size:11.5px;font-weight:600;color:var(--t-2);
  font-family:var(--f-mono);cursor:pointer;user-select:none;
  transition:all .15s;
}
.tl-filter-pill:hover{background:var(--line-2);color:var(--t-1);border-color:var(--line-3);}
.tl-filter-pill.active{background:var(--accent-soft);border-color:var(--accent-line);color:#c7d2fe;}
.tl-filter-pill svg{flex-shrink:0;}
/* Group chips: Agent Patterns / Tools — quick group toggle for the
   corresponding set of heatmap lanes. Full per-lane control still lives
   in the filter popover. */
.tl-group-chip{
  display:flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:var(--r-sm);
  background:var(--line-1);border:1px solid var(--line-2);
  font-size:11.5px;font-weight:600;color:var(--t-2);
  font-family:var(--f-mono);cursor:pointer;user-select:none;
  transition:all .15s;
}
.tl-group-chip:hover{background:var(--line-2);color:var(--t-1);border-color:var(--line-3);}
.tl-group-chip.off{opacity:.45;filter:grayscale(.4);}
.tl-group-chip.partial .gc-count{color:var(--warn);}
.tl-group-chip .gc-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 5px currentColor;
}
.gc-dot-agents{
  background:conic-gradient(from 0deg,#6366f1,#22d3ee,#f59e0b,#4ade80,#a78bfa,#6366f1);
  box-shadow:0 0 5px rgba(129,140,248,.55);
}
.gc-dot-tools{
  background:linear-gradient(135deg,#ec4899 0%,#ec4899 50%,#64748b 50%,#64748b 100%);
  box-shadow:0 0 5px rgba(236,72,153,.45);
}
.tl-group-chip .gc-label{letter-spacing:.01em;}
.tl-group-chip .gc-count{
  color:var(--t-3);font-size:10.5px;font-weight:700;
  padding-left:2px;border-left:1px solid var(--line-2);padding-inline-start:7px;
  margin-left:1px;
}
.tl-group-chip.off .gc-count{color:var(--t-4);}
/* Popover */
#pf-pop{
  position:fixed;bottom:90px;display:none;flex-direction:column;
  min-width:280px;max-width:320px;
  background:rgba(15,18,28,.98);backdrop-filter:blur(10px);
  border:1px solid var(--line-3);border-radius:var(--r-md);
  box-shadow:0 12px 48px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset;
  z-index:250;overflow:hidden;
  font-family:var(--f-sans);
}
#pf-pop.open{display:flex;animation:pfFadeIn .16s ease-out;}
@keyframes pfFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.pf-head{
  display:flex;align-items:center;gap:8px;
  padding:11px 13px 10px;border-bottom:1px solid var(--line-1);
}
.pf-title{
  font-size:10.5px;font-weight:700;letter-spacing:.12em;
  color:var(--t-3);text-transform:uppercase;flex:1;
}
.pf-btn{
  padding:3px 9px;border-radius:var(--r-xs);
  background:var(--line-1);border:1px solid var(--line-2);
  color:var(--t-2);font-size:11px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .15s;
}
.pf-btn:hover{background:var(--line-2);color:var(--t-1);border-color:var(--line-3);}
.pf-close{
  width:22px;height:22px;border-radius:var(--r-xs);
  background:transparent;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--t-3);cursor:pointer;font-size:12px;transition:all .15s;
}
.pf-close:hover{background:var(--line-1);color:var(--t-1);}
.pf-list{
  display:flex;flex-direction:column;
  padding:6px 6px;
  max-height:none; /* unbounded up to 10 rows */
}
.pf-list.scroll{max-height:282px;overflow-y:auto;}
.pf-list::-webkit-scrollbar{width:8px;}
.pf-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px;}
.pf-list::-webkit-scrollbar-thumb:hover{background:var(--line-3);}
.pf-row{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:var(--r-xs);cursor:pointer;
  transition:background .12s;
}
.pf-row:hover{background:var(--line-1);}
.pf-cb{
  width:14px;height:14px;border-radius:3px;
  border:1.5px solid var(--line-3);background:transparent;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s;
}
.pf-row.on .pf-cb{background:var(--accent);border-color:var(--accent);}
.pf-row.on .pf-cb::after{content:'✓';color:#0a0d18;font-size:10px;font-weight:900;line-height:1;}
.pf-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.pf-name{flex:1;font-size:13px;font-weight:500;color:var(--t-1);}
.pf-row.off .pf-name{color:var(--t-3);}
.pf-count{
  font-size:11px;color:var(--t-3);font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
/* Range picker */
.tl-range-pill{
  display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--r-sm);
  background:var(--line-1);border:1px solid var(--line-2);
  font-size:12px;font-weight:500;color:var(--t-2);
  font-family:var(--f-sans);cursor:pointer;user-select:none;
  transition:all .15s;
}
.tl-range-pill:hover{background:var(--line-2);color:var(--t-1);border-color:var(--line-3);}
.tl-range-pill.playback{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.35);color:#fcd34d;}
.tl-range-pill .rp-label{font-size:10.5px;color:var(--t-3);font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
.tl-range-pill.playback .rp-label{color:rgba(252,211,77,.6);}
.tl-range-pill .rp-caret{font-size:9px;opacity:.6;}
.tl-range-pill .rp-clear{display:none;font-size:14px;line-height:1;margin-left:2px;opacity:.7;width:14px;text-align:center;border-radius:3px;color:inherit;}
.tl-range-pill.playback .rp-clear{display:inline-block;}
.tl-range-pill.playback .rp-caret{display:none;}
.tl-range-pill .rp-clear:hover{opacity:1;background:rgba(245,158,11,.2);}
#rp-pop{
  position:fixed;bottom:138px;display:none;flex-direction:column;
  min-width:320px;max-width:360px;
  background:rgba(15,18,28,.98);backdrop-filter:blur(10px);
  border:1px solid var(--line-3);border-radius:var(--r-md);
  box-shadow:0 12px 48px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset;
  z-index:250;overflow:hidden;font-family:var(--f-sans);
}
#rp-pop.open{display:flex;animation:pfFadeIn .16s ease-out;}
.rp-head{padding:11px 13px 10px;border-bottom:1px solid var(--line-1);display:flex;align-items:center;gap:8px;}
.rp-title{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--t-3);text-transform:uppercase;flex:1;}
.rp-section{padding:10px 13px;border-bottom:1px solid var(--line-1);}
.rp-section:last-child{border-bottom:none;}
.rp-section-lbl{font-size:10px;font-weight:700;color:var(--t-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;}
.rp-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.rp-shortcut{
  padding:7px 10px;border-radius:var(--r-xs);
  background:var(--line-1);border:1px solid var(--line-2);
  color:var(--t-2);font-size:12.5px;font-weight:500;cursor:pointer;
  text-align:center;transition:all .15s;font-family:inherit;
}
.rp-shortcut:hover{background:var(--line-2);color:var(--t-1);border-color:var(--line-3);}
.rp-shortcut.active{background:var(--accent-soft);border-color:var(--accent-line);color:#c7d2fe;}
.rp-custom-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.rp-custom-row:last-child{margin-bottom:0;}
.rp-custom-k{font-size:11px;color:var(--t-3);font-weight:600;min-width:24px;text-transform:uppercase;letter-spacing:.08em;}
.rp-custom-v{
  flex:1;padding:6px 9px;border-radius:var(--r-xs);
  background:var(--line-1);border:1px solid var(--line-2);
  color:var(--t-1);font-size:12.5px;font-family:var(--f-mono);
  color-scheme:dark;
}
.rp-custom-v:focus{outline:none;border-color:var(--accent-line);background:var(--line-2);}
.rp-apply{
  width:100%;margin-top:8px;padding:8px 0;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  color:#c7d2fe;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .15s;
}
.rp-apply:hover{background:rgba(129,140,248,.22);}
.rp-apply:disabled{opacity:.4;cursor:not-allowed;}
/* HITL vertical markers */
.tl-hitl{position:absolute;top:-4px;bottom:-2px;width:1.5px;background:var(--warn);box-shadow:0 0 5px rgba(245,158,11,.6);pointer-events:none;}
.tl-hitl::before{content:'';position:absolute;top:-4px;left:-2px;width:5.5px;height:5.5px;border-radius:50%;background:var(--warn);box-shadow:0 0 5px rgba(245,158,11,.7);}
/* Playhead */
.tl-playhead{
  position:absolute;top:-4px;bottom:-2px;left:100%;
  width:1.5px;background:var(--t-0);
  box-shadow:0 0 8px rgba(255,255,255,.45);
  pointer-events:none;
}
#tl.tl-past:not(.tl-scrubbing) .tl-playhead{transition:left .12s linear;}
#tl.tl-past:not(.tl-scrubbing) .tl-scrub-fill{transition:width .12s linear;}
/* Suppress the tween during wrap-around so the cursor jumps from end→start
   without a visible backwards slide. */
#tl.tl-wrap .tl-playhead,
#tl.tl-wrap .tl-scrub-fill{transition:none !important;}
.tl-playhead::after{
  content:'';position:absolute;top:50%;left:50%;
  width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);
  transform:translate(-50%,-50%);
  box-shadow:0 0 12px var(--accent-glow);
}
/* non-live: playhead orange, bars dim after it */
#tl.tl-past .tl-playhead{background:var(--warn);box-shadow:0 0 8px rgba(245,158,11,.6);}
#tl.tl-past .tl-playhead::after{border-color:var(--warn);box-shadow:0 0 12px rgba(245,158,11,.55);}
/* Highlight pulse — triggered when a message is opened from a popup.
   The ::before element is a growing ring that fades out, centered on the
   playhead dot. */
.tl-playhead.tl-pulse::before{
  content:'';position:absolute;top:50%;left:50%;
  width:12px;height:12px;border-radius:50%;
  border:2px solid var(--warn);
  transform:translate(-50%,-50%);
  animation:tlPulse 1.5s ease-out 2;
  pointer-events:none;
}
@keyframes tlPulse{
  0%   { opacity:.95; transform:translate(-50%,-50%) scale(1);   border-width:2.5px; }
  60%  { opacity:.35; transform:translate(-50%,-50%) scale(3.2); border-width:1px; }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(4.4); border-width:.5px; }
}
/* Highlight on heatmap bars — when "Open in timeline" selects an event,
   the matching bar(s) stay vivid while every other bar desaturates.
   Pure saturation play, no rings or flashes. */
#tl.tl-spotlight .tl-bar{
  filter:saturate(0) brightness(.55);
  opacity:.45;
  transition:filter .35s ease, opacity .35s ease;
}
#tl.tl-spotlight .tl-bar.tl-pulse-bar{
  filter:saturate(1.25) brightness(1.15);
  opacity:1;
}
#tl.tl-past .tl-bar.tl-future{opacity:.2 !important;filter:grayscale(.5);}
#tl.tl-past .tl-live{color:var(--t-3);}
#tl.tl-past .tl-live .ldot{background:var(--t-3);box-shadow:none;}
.tl-live{cursor:pointer;user-select:none;}
.tl-live:hover{color:#86efac;}
/* Scrub progress bar */
.tl-scrub{
  height:3px;border-radius:2px;
  background:var(--line-2);
  position:relative;overflow:hidden;
  /* Align left edge with the heatmap bars (which start after the 92px
     lane-label gutter) so the scrub-fill tracks the playhead exactly. */
  margin-left:92px;
}
.tl-scrub-fill{
  height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--accent) 0%,#67e8f9 100%);
  box-shadow:0 0 8px var(--accent-glow);
}
#tl.tl-past .tl-scrub-fill{background:linear-gradient(90deg,var(--warn) 0%,#fbbf24 100%);box-shadow:0 0 8px rgba(245,158,11,.4);}
/* Time labels */
.tl-labels{
  position:absolute;bottom:-16px;left:92px;right:0;
  display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--t-3);font-family:var(--f-mono);
  pointer-events:none;letter-spacing:.02em;
}
.tl-labels .now{color:var(--ok);font-weight:600;}
.spd-ctl{display:flex;align-items:center;gap:2px;margin-left:6px;background:var(--line-1);border:1px solid var(--line-2);border-radius:var(--r-xs);padding:2px;}
.spd{padding:3px 7px;border-radius:3px;font-size:11.5px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--t-3);font-family:var(--f-mono);transition:all .15s;}
.spd:hover{color:var(--t-1);}
.spd.on{background:var(--accent-soft);color:#c7d2fe;}
.spd.disabled,.spd:disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
.spd-ctl.locked{opacity:.75;}