/* ═══════════════════════════════════════════════════════════════
   TIMELINE-N + TIMELINE-ITEM-N

   Grid-based layout with three columns:
     [marker] var(--timeline-marker-w) [content] 1fr [aside] auto

   Items are subgrid of the container, so their dots/labels/aside
   align perfectly to a single vertical axis regardless of size.

   When timeline-ui is nested inside agent-reasoning-ui (or another
   grid ancestor that exposes the same columns), it inherits them
   via subgrid so the nested rows align to the outer grid.

   For numbered-wizard patterns, use <stepper-ui>.
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
@scope (timeline-ui) {
  :where(:scope) {
    /* Grid */
    --timeline-marker-w:           1.25rem;
    --timeline-gap-col:            var(--a-space-2);
    --timeline-gap-row:            var(--a-space-3);

    /* Dot */
    --timeline-dot-size:           0.625rem;
    --timeline-dot-bg:             var(--a-border);
    --timeline-dot-bg-active:      var(--a-accent-bg);
    --timeline-dot-bg-done:        var(--a-success-bg);
    --timeline-dot-bg-error:       var(--a-danger-bg);
    --timeline-dot-bg-warning:     var(--a-warning-bg);

    /* Sub-dot (outcomes) */
    --timeline-subdot-size:        4px;
    --timeline-subdot-bg:          var(--a-fg-subtle);

    /* Connector line */
    --timeline-line-size:          2px;
    --timeline-line-fg:            var(--a-border-subtle);
    --timeline-line-fg-done:       var(--a-border);

    /* Marker box — the shared circular footprint the icon marker fills and
       the dot / spinner center within (the column track --timeline-marker-w
       is a touch wider for breathing room). One token sizes the whole marker
       system; consumers (agent-reasoning-ui, chat surfaces) override it to
       scale every marker type coherently. */
    --timeline-marker-box-size:    1rem;

    /* Icon (replaces dot) */
    --timeline-icon-size:          var(--timeline-marker-box-size);
    --timeline-icon-bg:            var(--a-bg-muted);
    --timeline-icon-fg:            var(--a-fg-subtle);
    --timeline-icon-border:        var(--a-border-subtle);
    --timeline-icon-bg-success:    var(--a-success-muted);
    --timeline-icon-fg-success:    var(--a-success-strong);
    --timeline-icon-bg-accent:     var(--a-accent-muted);
    --timeline-icon-fg-accent:     var(--a-accent);
    --timeline-icon-bg-warning:    var(--a-warning-muted);
    --timeline-icon-fg-warning:    var(--a-warning);
    --timeline-icon-bg-danger:     var(--a-danger-muted);
    --timeline-icon-fg-danger:     var(--a-danger-strong);

    /* Typography */
    --timeline-label-weight:       var(--a-weight-medium);
    --timeline-label-size:         var(--a-ui-size);
    --timeline-label-fg:           var(--a-fg);
    --timeline-label-fg-muted:     var(--a-fg-muted);
    --timeline-desc-fg:            var(--a-fg-subtle);
    --timeline-desc-size:          var(--a-ui-sm);
    --timeline-time-fg:            var(--a-fg-muted);
    --timeline-time-size:          var(--a-ui-sm);
    --timeline-outcome-fg:         var(--a-fg-muted);

    /* Motion */
    --timeline-duration:           var(--a-duration-fast);
    --timeline-easing:             var(--a-easing-out);
    --timeline-spin-duration:      0.8s;
    --timeline-pulse-duration:     2s;
  }

  :scope {
    box-sizing: border-box;
    display: grid;
    grid-template-columns:
      [marker] var(--timeline-marker-w)
      [content] 1fr
      [aside] auto;
    column-gap: var(--timeline-gap-col);
    row-gap: var(--timeline-gap-row);
    min-width: 0;
  }

  /* Compact variant (agent-reasoning + chat-adjacent) */
  :scope[size="sm"] {
    --timeline-marker-w: 1rem;
    --timeline-marker-box-size: 0.875rem;
    --timeline-dot-size: 6px;
    --timeline-gap-row: var(--a-space-2);
    --timeline-label-size: var(--a-ui-sm);
    --timeline-label-weight: var(--a-weight-normal);
  }

  /* Horizontal layout — fall back to flow layout; drops subgrid.
     Horizontal timelines don't need column alignment since items sit
     side-by-side, not stacked. */
  :scope[orientation="horizontal"] {
    display: flex;
    flex-direction: row;
    gap: 0;
  }
}

/* When nested inside agent-reasoning-ui or other grid ancestors that
   expose the same three named columns, inherit them via subgrid so
   the inner rows align to the outer axis. */
agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
[data-reasoning-iteration] timeline-ui:not([orientation="horizontal"]) {
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

/* ── Item — co-located in timeline.js, declared here as its own scope ── */
@scope (timeline-item-ui) {
  :where(:scope) {
    /* Item-local aliases of parent timeline-ui tokens. Co-located items
       legitimately read parent tokens so the dot/line/icon visuals stay
       coherent across the timeline (sanctioned composition pattern). */
    --timeline-item-marker-w:           var(--timeline-marker-w, 1.25rem);
    --timeline-item-gap-row:            var(--timeline-gap-row, var(--a-space-3));

    --timeline-item-dot-size:           var(--timeline-dot-size, 0.625rem);
    --timeline-item-dot-bg:             var(--timeline-dot-bg, var(--a-border));
    --timeline-item-dot-bg-active:      var(--timeline-dot-bg-active, var(--a-accent-bg));
    --timeline-item-dot-bg-done:        var(--timeline-dot-bg-done, var(--a-success-bg));
    --timeline-item-dot-bg-error:       var(--timeline-dot-bg-error, var(--a-danger-bg));
    --timeline-item-dot-bg-warning:     var(--timeline-dot-bg-warning, var(--a-warning-bg));

    --timeline-item-subdot-size:        var(--timeline-subdot-size, 4px);
    --timeline-item-subdot-bg:          var(--timeline-subdot-bg, var(--a-fg-subtle));

    --timeline-item-line-size:          var(--timeline-line-size, 2px);
    --timeline-item-line-fg:            var(--timeline-line-fg, var(--a-border-subtle));
    --timeline-item-line-fg-done:       var(--timeline-line-fg-done, var(--a-border));

    /* Reads the override THEN the inherited -default (set on timeline-ui,
       and shrunk by [size="sm"]) THEN a literal — so the marker box scales
       with both consumer overrides AND the sm compact variant. */
    --timeline-item-marker-box-size:    var(--timeline-marker-box-size, var(--timeline-marker-box-size, 1rem));
    --timeline-item-icon-size:          var(--timeline-icon-size, var(--timeline-item-marker-box-size));
    --timeline-item-icon-bg:            var(--timeline-icon-bg, var(--a-bg-muted));
    --timeline-item-icon-fg:            var(--timeline-icon-fg, var(--a-fg-subtle));
    --timeline-item-icon-border:        var(--timeline-icon-border, var(--a-border-subtle));
    --timeline-item-icon-bg-success:    var(--timeline-icon-bg-success, var(--a-success-muted));
    --timeline-item-icon-fg-success:    var(--timeline-icon-fg-success, var(--a-success-strong));
    --timeline-item-icon-bg-accent:     var(--timeline-icon-bg-accent, var(--a-accent-muted));
    --timeline-item-icon-fg-accent:     var(--timeline-icon-fg-accent, var(--a-accent));
    --timeline-item-icon-bg-warning:    var(--timeline-icon-bg-warning, var(--a-warning-muted));
    --timeline-item-icon-fg-warning:    var(--timeline-icon-fg-warning, var(--a-warning));
    --timeline-item-icon-bg-danger:     var(--timeline-icon-bg-danger, var(--a-danger-muted));
    --timeline-item-icon-fg-danger:     var(--timeline-icon-fg-danger, var(--a-danger-strong));

    --timeline-item-label-weight:       var(--timeline-label-weight, var(--a-weight-medium));
    --timeline-item-label-size:         var(--timeline-label-size, var(--a-ui-size));
    --timeline-item-label-fg:           var(--timeline-label-fg, var(--a-fg));
    --timeline-item-label-fg-muted:     var(--timeline-label-fg-muted, var(--a-fg-muted));
    --timeline-item-desc-fg:            var(--timeline-desc-fg, var(--a-fg-subtle));
    --timeline-item-desc-size:          var(--timeline-desc-size, var(--a-ui-sm));
    --timeline-item-time-fg:            var(--timeline-time-fg, var(--a-fg-muted));
    --timeline-item-time-size:          var(--timeline-time-size, var(--a-ui-sm));
    --timeline-item-outcome-fg:         var(--timeline-outcome-fg, var(--a-fg-muted));

    --timeline-item-duration:           var(--timeline-duration, var(--a-duration-fast));
    --timeline-item-easing:              var(--timeline-easing, var(--a-easing-out));
    --timeline-item-spin-duration:      var(--timeline-spin-duration, 0.8s);

    --timeline-item-toggle-px:          var(--a-space-0-5);
    --timeline-item-toggle-time-margin: 1.5rem;
    --timeline-item-outcome-indent:     0.75rem;
  }

  :scope {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    grid-auto-rows: auto;
    align-items: baseline;
    position: relative;
    min-width: 0;
  }

  /* Stamp default slot children when the author didn't — see timeline.js */
  :scope [slot] {
    min-width: 0;
  }

  /* ═══════ Marker (dot) — positioned absolutely in the marker column ═══════ */

  :scope::before {
    content: '';
    position: absolute;
    left: calc((var(--timeline-item-marker-w) - var(--timeline-item-dot-size)) / 2);
    top: calc((1.4em - var(--timeline-item-dot-size)) / 2 + 1px);
    width: var(--timeline-item-dot-size);
    height: var(--timeline-item-dot-size);
    border-radius: 50%;
    background: var(--timeline-item-dot-bg);
    box-sizing: border-box;
    z-index: 1;
    transition: background var(--timeline-item-duration) var(--timeline-item-easing);
  }

  :scope[status="completed"]::before { background: var(--timeline-item-dot-bg-done); }
  :scope[status="active"]::before    { background: var(--timeline-item-dot-bg-active); }
  :scope[status="error"]::before     { background: var(--timeline-item-dot-bg-error); }

  /* Variant: success / accent / warning / danger (for non-active items) */
  :scope[variant="success"]:not([status="active"]):not([status="error"])::before { background: var(--timeline-item-dot-bg-done); }
  :scope[variant="accent"]:not([status="active"]):not([status="error"])::before  { background: var(--timeline-item-dot-bg-active); }
  :scope[variant="warning"]:not([status="active"]):not([status="error"])::before { background: var(--timeline-item-dot-bg-warning); }
  :scope[variant="danger"]:not([status="active"]):not([status="error"])::before  { background: var(--timeline-item-dot-bg-error); }

  /* Spinner overlay — `[spinner]` is a presentation hint that turns the
     active dot into a spinning ring. Orthogonal to status. */
  :scope[status="active"][spinner]::before {
    background: transparent;
    border: 2px solid var(--timeline-item-dot-bg);
    border-top-color: var(--timeline-item-dot-bg-active);
    animation: tl-spin var(--timeline-item-spin-duration) linear infinite;
  }

  /* ═══════ Connector line ═══════ */

  :scope::after {
    content: '';
    position: absolute;
    left: calc((var(--timeline-item-marker-w) - var(--timeline-item-line-size)) / 2);
    top: calc((1.4em + var(--timeline-item-dot-size)) / 2 + 2px);
    bottom: calc(-1 * var(--timeline-item-gap-row));
    width: var(--timeline-item-line-size);
    background: var(--timeline-item-line-fg);
  }

  :scope[status="completed"]::after { background: var(--timeline-item-line-fg-done); }
  :scope[data-last]::after { display: none; }

  /* ═══════ Icon mode — icon-ui in [slot="icon"] replaces the dot ═══════ */

  :scope:has([slot="icon"])::before { display: none; }

  :scope [slot="icon"] {
    grid-column: marker;
    grid-row: 1;
    justify-self: center;
    align-self: baseline;
    margin-top: calc((1.4em - var(--timeline-item-icon-size)) / 2);
    width: var(--timeline-item-icon-size);
    height: var(--timeline-item-icon-size);
    border-radius: 50%;
    background: var(--timeline-item-icon-bg);
    color: var(--timeline-item-icon-fg);
    /* Subtle ring so the default (no-variant) chip reads as a marker even
       when its muted fill blends with the surrounding surface; the colored
       variants below restate background only, keeping this ring. */
    border: 1px solid var(--timeline-item-icon-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --a-icon-size: calc(var(--timeline-item-icon-size) * 0.625);
    z-index: 1;
    box-sizing: border-box;
  }

  :scope[variant="success"] [slot="icon"] { background: var(--timeline-item-icon-bg-success); color: var(--timeline-item-icon-fg-success); }
  :scope[variant="accent"]  [slot="icon"] { background: var(--timeline-item-icon-bg-accent);  color: var(--timeline-item-icon-fg-accent); }
  :scope[variant="warning"] [slot="icon"] { background: var(--timeline-item-icon-bg-warning); color: var(--timeline-item-icon-fg-warning); }
  :scope[variant="danger"]  [slot="icon"] { background: var(--timeline-item-icon-bg-danger);  color: var(--timeline-item-icon-fg-danger); }

  /* Push connector line past the icon circle */
  :scope:has([slot="icon"])::after {
    top: calc((1.4em + var(--timeline-item-icon-size)) / 2 + 2px);
  }

  /* ═══════ Content slots ═══════ */

  :scope [slot="label"] {
    grid-column: content;
    grid-row: 1;
    font-weight: var(--timeline-item-label-weight);
    font-size: var(--timeline-item-label-size);
    color: var(--timeline-item-label-fg);
    line-height: 1.4;
    overflow-wrap: break-word;
    min-width: 0;
  }

  :scope[status="completed"] [slot="label"] {
    color: var(--timeline-item-label-fg-muted);
  }

  :scope [slot="description"] {
    grid-column: content / -1;
    grid-row: 2;
    color: var(--timeline-item-desc-fg);
    font-size: var(--timeline-item-desc-size);
    line-height: 1.5;
    margin-top: var(--a-space-0-5);
  }

  :scope [slot="time"] {
    grid-column: aside;
    grid-row: 1;
    color: var(--timeline-item-time-fg);
    font-size: var(--timeline-item-time-size);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    white-space: nowrap;
    justify-self: end;
  }

  /* Hide empty slots so they don't steal grid track space */
  :scope > [slot]:empty {
    display: none;
  }

  /* ═══════ Outcomes — nested sub-rows ═══════ */

  :scope [slot="outcomes"] {
    grid-column: content / -1;
    grid-row: 3;
    margin: var(--a-space-1) 0 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--a-space-0-5);
    color: var(--timeline-item-outcome-fg);
    font-size: var(--timeline-item-desc-size);
    line-height: 1.4;
    animation: tl-fade var(--timeline-item-duration) var(--timeline-item-easing);
  }

  :scope [slot="outcomes"][hidden] { display: none; }

  :scope [slot="outcomes"] > li {
    position: relative;
    padding-left: var(--timeline-item-outcome-indent);
    overflow-wrap: break-word;
    min-width: 0;
  }

  :scope [slot="outcomes"] > li::before {
    content: '';
    position: absolute;
    left: calc((var(--timeline-item-outcome-indent) - var(--timeline-item-subdot-size)) / 2);
    top: calc((1.4em - var(--timeline-item-subdot-size)) / 2 + 1px);
    width: var(--timeline-item-subdot-size);
    height: var(--timeline-item-subdot-size);
    border-radius: 50%;
    background: var(--timeline-item-subdot-bg);
  }

  /* ═══════ Toggle caret (outcomes) ═══════ */

  :scope > [data-timeline-toggle] {
    position: absolute;
    inset-inline-end: 0;
    /* Place the caret's icon-center on row 1's optical center.
       The button has --a-space-0-5 vertical padding, so the icon
       sits that much lower inside the box; we subtract that so the
       icon (not the box) lines up with the time-slot text center. */
    top: calc((1.4em - 1em) / 2 - var(--a-space-0-5));
    background: none;
    border: none;
    padding: var(--a-space-0-5) var(--timeline-item-toggle-px);
    margin: 0;
    cursor: pointer;
    color: var(--timeline-item-label-fg-muted, var(--a-fg-muted));
    border-radius: var(--a-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: background var(--timeline-item-duration) var(--timeline-item-easing),
                color      var(--timeline-item-duration) var(--timeline-item-easing);
  }

  :scope > [data-timeline-toggle]:hover {
    background: var(--a-bg-subtle);
    color: var(--timeline-item-label-fg, var(--a-fg));
  }

  /* Reserve room so the time isn't overlapped by the caret */
  :scope:has(> [data-timeline-toggle]) [slot="time"] {
    margin-inline-end: var(--timeline-item-toggle-time-margin);
  }

  :scope > [data-timeline-toggle]:focus-visible {
    outline: none;
    box-shadow: var(--a-focus-ring);
  }
}

/* When size=sm on the parent, ring is 1.5px so the small dot still looks crisp.
   This rule reaches across the parent→child boundary and stays outside @scope. */
timeline-ui[size="sm"] > timeline-item-ui[status="active"][spinner]::before {
  border-width: 1.5px;
}

/* ═══════ Horizontal layout — flow, not grid ═══════ */

timeline-ui[orientation="horizontal"] > timeline-item-ui {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  padding-top: calc(var(--timeline-dot-size) + var(--timeline-gap-col));
  text-align: center;
  position: relative;
}

timeline-ui[orientation="horizontal"] > timeline-item-ui::before {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

timeline-ui[orientation="horizontal"] > timeline-item-ui::after {
  left: 50%;
  top: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-size) / 2);
  right: -50%;
  bottom: auto;
  width: 100%;
  height: var(--timeline-line-size);
}

timeline-ui[orientation="horizontal"] > timeline-item-ui [slot="label"],
timeline-ui[orientation="horizontal"] > timeline-item-ui [slot="description"],
timeline-ui[orientation="horizontal"] > timeline-item-ui [slot="time"] {
  grid-column: auto;
  grid-row: auto;
  margin-top: var(--a-space-1);
}

/* ═══════ Animations ═══════ */

@keyframes tl-spin {
  to { transform: rotate(360deg); }
}

@keyframes tl-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  timeline-item-ui[status="active"][spinner]::before { animation: none; }
}
