@scope (agent-reasoning-ui) {
  :where(:scope) {
    /* Grid — same columns as timeline-ui so they align via subgrid */
    --agent-reasoning-marker-w-default:        1rem;
    --agent-reasoning-gap-col-default:         var(--a-space-2);
    --agent-reasoning-gap-row-default:         var(--a-space-2);

    /* Typography */
    --agent-reasoning-font-default:            var(--a-ui-sm);
    --agent-reasoning-weight-heading-default:  var(--a-weight-medium);

    /* Colors */
    --agent-reasoning-fg-default:              var(--a-fg);
    --agent-reasoning-fg-muted-default:        var(--a-fg-muted);
    --agent-reasoning-fg-subtle-default:       var(--a-fg-subtle);
    --agent-reasoning-border-default:          var(--a-border-subtle);
    --agent-reasoning-spinner-track-default:   var(--a-border-subtle);
    --agent-reasoning-spinner-head-default:    var(--a-accent-bg);
    --agent-reasoning-iter-bg-default:         var(--a-bg-subtle);
    --agent-reasoning-iter-bg-active-default:  var(--a-bg-muted);
    --agent-reasoning-iter-border-default:     var(--a-border-subtle);

    /* Sizes */
    --agent-reasoning-marker-size-default:     var(--a-icon-size);
    --agent-reasoning-radius-default:          var(--a-radius);
    --agent-reasoning-iter-padding-default:    var(--a-space-3);

    /* Motion */
    --agent-reasoning-duration-default:        var(--a-duration-fast);
    --agent-reasoning-easing-default:          var(--a-easing-out);
    --agent-reasoning-spin-duration-default:   0.8s;
  }

  :scope {
    display: grid;
    grid-template-columns:
      [marker] var(--agent-reasoning-marker-w, var(--agent-reasoning-marker-w-default))
      [content] 1fr
      [aside] auto;
    column-gap: var(--agent-reasoning-gap-col, var(--agent-reasoning-gap-col-default));
    row-gap: var(--agent-reasoning-gap-row, var(--agent-reasoning-gap-row-default));
    min-width: 0;
    font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
  }

  /* ═══════ Summary row ═══════ */

  [data-reasoning-summary] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding-bottom: var(--a-space-1);
    color: var(--agent-reasoning-fg-muted, var(--agent-reasoning-fg-muted-default));
    border-radius: var(--a-radius-sm);
    transition: color var(--agent-reasoning-duration, var(--agent-reasoning-duration-default)) var(--agent-reasoning-easing, var(--agent-reasoning-easing-default));
  }

  [data-reasoning-summary]:hover {
    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
  }

  [data-reasoning-summary]:focus-visible {
    outline: none;
    box-shadow: var(--a-focus-ring);
  }

  [data-reasoning-summary] > [data-reasoning-check],
  [data-reasoning-summary] > [data-reasoning-spinner] {
    grid-column: marker;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    flex-shrink: 0;
  }

  [data-reasoning-spinner] {
    width: var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default));
    height: var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default));
    border: 1.5px solid var(--agent-reasoning-spinner-track, var(--agent-reasoning-spinner-track-default));
    border-top-color: var(--agent-reasoning-spinner-head, var(--agent-reasoning-spinner-head-default));
    border-radius: 50%;
    animation: _ar-spin var(--agent-reasoning-spin-duration, var(--agent-reasoning-spin-duration-default)) linear infinite;
    box-sizing: border-box;
  }

  [data-reasoning-spinner][data-small] {
    width: calc(var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default)) * 0.75);
    height: calc(var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default)) * 0.75);
  }

  [data-reasoning-check] {
    --a-icon-size: var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default));
  }

  [data-reasoning-summary] > [data-reasoning-label] {
    grid-column: content;
    grid-row: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  [data-reasoning-summary] > [data-reasoning-meta] {
    grid-column: aside;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--agent-reasoning-gap-col, var(--agent-reasoning-gap-col-default));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* ═══════ Body ═══════ */

  [data-reasoning-body] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    row-gap: var(--agent-reasoning-gap-row, var(--agent-reasoning-gap-row-default));
  }

  [data-reasoning-body][hidden] { display: none; }

  /* All direct children of body span the grid */
  [data-reasoning-body] > * {
    grid-column: 1 / -1;
  }

  /* ═══════ Thought — horizontal dash in marker column, text in content ═══════ */

  [data-reasoning-thought] {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    line-height: 1.5;
    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
    animation: _ar-fade var(--agent-reasoning-duration, var(--agent-reasoning-duration-default)) var(--agent-reasoning-easing, var(--agent-reasoning-easing-default));
  }

  [data-reasoning-thought]::before {
    content: '';
    grid-column: marker;
    height: 1px;
    background: var(--agent-reasoning-border, var(--agent-reasoning-border-default));
    align-self: center;
    width: 100%;
  }

  [data-reasoning-thought] > [data-reasoning-thought-text] {
    grid-column: content / -1;
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* ═══════ Plan — card in content+aside, marker empty ═══════ */

  [data-reasoning-plan] {
    grid-column: content / -1;
    display: flex;
    flex-direction: column;
    gap: var(--a-space-1);
    padding: var(--a-space-2) var(--a-space-3);
    border: 1px solid var(--agent-reasoning-border, var(--agent-reasoning-border-default));
    border-radius: var(--agent-reasoning-radius, var(--agent-reasoning-radius-default));
    background: var(--agent-reasoning-iter-bg, var(--agent-reasoning-iter-bg-default));
  }

  [data-reasoning-plan-label] {
    font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
    color: var(--agent-reasoning-fg-subtle, var(--agent-reasoning-fg-subtle-default));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--agent-reasoning-weight-heading, var(--agent-reasoning-weight-heading-default));
  }

  [data-reasoning-plan-list] {
    margin: 0;
    padding-inline-start: var(--a-space-5);
    font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
  }

  [data-reasoning-plan-list] > li {
    padding-block: 1px;
  }

  /* ═══════ Iteration — card with its own grid ═══════ */

  [data-reasoning-iteration] {
    display: grid;
    grid-template-columns:
      [marker] var(--agent-reasoning-marker-w, var(--agent-reasoning-marker-w-default))
      [content] 1fr
      [aside] auto;
    column-gap: var(--agent-reasoning-gap-col, var(--agent-reasoning-gap-col-default));
    row-gap: var(--a-space-2);
    padding: var(--agent-reasoning-iter-padding, var(--agent-reasoning-iter-padding-default));
    border: 1px solid var(--agent-reasoning-iter-border, var(--agent-reasoning-iter-border-default));
    border-radius: var(--agent-reasoning-radius, var(--agent-reasoning-radius-default));
    background: var(--agent-reasoning-iter-bg, var(--agent-reasoning-iter-bg-default));
  }

  [data-reasoning-iteration][data-active] {
    background: var(--agent-reasoning-iter-bg-active, var(--agent-reasoning-iter-bg-active-default));
  }

  [data-reasoning-iter-header] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    color: var(--agent-reasoning-fg-muted, var(--agent-reasoning-fg-muted-default));
  }

  [data-reasoning-iter-header] > [data-reasoning-spinner],
  [data-reasoning-iter-header] > icon-ui {
    grid-column: marker;
    justify-self: center;
    align-self: center;
  }

  [data-reasoning-iter-n] {
    grid-column: content;
    font-variant-numeric: tabular-nums;
    color: var(--agent-reasoning-fg-subtle, var(--agent-reasoning-fg-subtle-default));
    font-weight: var(--agent-reasoning-weight-heading, var(--agent-reasoning-weight-heading-default));
    white-space: nowrap;
  }

  [data-reasoning-iter-label] {
    grid-column: content;
    justify-self: start;
    margin-inline-start: var(--a-space-2);
    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Compact: pack iter-n + label into a single row cell */
  [data-reasoning-iter-header] {
    display: flex;
    align-items: center;
    gap: var(--a-space-2);
    grid-column: 1 / -1;
  }

  [data-reasoning-iter-header] > [data-reasoning-iter-n] {
    grid-column: auto;
  }
  [data-reasoning-iter-header] > [data-reasoning-iter-label] {
    grid-column: auto;
    margin-inline-start: 0;
    flex: 1;
  }

  [data-reasoning-iter-summary] {
    color: var(--agent-reasoning-fg-muted, var(--agent-reasoning-fg-muted-default));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
  }

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

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

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

  @media (prefers-reduced-motion: reduce) {
    [data-reasoning-spinner] { animation: none; }
  }
}
