/* Shared live-Gantt component — colored chunk per pi step, pulsing dot on the active one,
   activity + timer caption. Used by the chat (conversation turns) AND the admin (onboarding),
   so both show the same progress visual. Relies on the host page's theme CSS vars. */
.live { margin-top: 9px; animation: rise .3s both; max-width: 460px; }
.gantt-bar { display: flex; gap: 2px; height: 9px; border-radius: 6px; overflow: hidden;
  background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--border); }
.gantt-bar .seg { position: relative; min-width: 3px; opacity: .9; transition: flex-basis .45s ease; }
/* The active segment's width is driven per-frame by rAF (gantt.js) — no CSS transition here,
   or it would chase the moving target and smear the leading edge. */
.gantt-bar .seg.open { opacity: 1; transition: none; animation: segpulse 1.25s ease-in-out infinite; }
.gantt-bar .seg.open::after { content: ''; position: absolute; right: -2px; top: 50%;
  width: 9px; height: 9px; border-radius: 50%; background: inherit; transform: translateY(-50%);
  box-shadow: 0 0 0 2px var(--panel-solid), 0 0 10px 1px currentColor;
  color: inherit; animation: dotpulse 1.1s ease-in-out infinite; }
@keyframes segpulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
@keyframes dotpulse { 0%,100% { transform: translateY(-50%) scale(1); opacity: 1; } 50% { transform: translateY(-50%) scale(1.5); opacity: .6; } }
.gantt-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--text-faint); }
.gantt-cap .cur { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-cap .t { font-family: var(--mono); flex: none; }

/* Hover breakdown: a cursor-anchored tooltip listing every step start→end. Positioned by JS
   (gantt.js) to follow the hovered point, clamp to the viewport, and flip above/below. */
.gantt { position: relative; }
.gantt-bar { cursor: crosshair; }
.gantt-steps { position: absolute; left: 0; bottom: calc(100% + 9px); z-index: 50;
  width: min(340px, 92vw); display: none; max-height: 240px; overflow-y: auto; scroll-behavior: smooth;
  padding: 8px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--border-strong);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.6), 0 2px 8px -4px rgba(0,0,0,.35); }
.gantt-steps.show { display: block; }
/* caret pointing at the hovered point (down when the tooltip is above, up when flipped below) */
.gs-caret { position: absolute; width: 0; height: 0; border: 6px solid transparent; }
.gantt-steps:not(.below) .gs-caret { bottom: -12px; border-top-color: var(--panel-solid); }
.gantt-steps.below .gs-caret { top: -12px; border-bottom-color: var(--panel-solid); }
.gs-head { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint); padding: 0 6px 6px; position: sticky; top: 0; background: var(--panel-solid); }
.gs-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px;
  padding: 3px 6px; border-radius: 6px; font-size: 11.5px; transition: background .15s, box-shadow .15s; }
.gs-row.open { background: var(--hover); }
.gs-row.hl { background: var(--hover); box-shadow: inset 2px 0 0 var(--accent); }
.gs-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gs-n { font-family: var(--mono); font-size: 10px; color: var(--text-faint); min-width: 14px; text-align: right; }
.gs-l { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-t { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.gantt-bar .seg.hover { filter: brightness(1.55); }
@media (hover: none) { .gantt-steps { display: none !important; } }