@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
/* The rail's running marker and summary spinner are Spinner arcs, and its rows sit on Timeline's
 * `rows` variant, so the styles travel with it. */
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/spinner/spinner.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/timeline/timeline.css';
@layer cinder.components {
  /* ========================================
 * TOOL CALL RAIL
 * One turn's tool calls: a rail of one-line rows, the first and last few with the middle folded
 * behind a dashed button, and the calls that failed or need a person always in view. Its rows are
 * entries of Timeline's `rows` variant, which draws the marker column and the connector and leaves
 * the content of each row to the rail, because a tool call has no timestamp to lead with.
 * ======================================== */

  .cinder-tool-call-rail {
    --_cinder-tool-call-rail-marker-size: 0.875rem;
    --_cinder-tool-call-rail-dot-size: 0.4375rem;
    --_cinder-tool-call-rail-indent: calc(var(--_cinder-tool-call-rail-marker-size) + 0.625rem);
    --_cinder-tool-call-rail-bleed: var(--cinder-space-1-5);

    container: cinder-tool-call-rail / inline-size;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-sm);
    line-height: 1.25rem;
  }

  /* ----------------------------------------
 * Summary line: "Used 30 tools, 1 failed, 1 waiting on you, 18s"
 * ---------------------------------------- */

  .cinder-tool-call-rail__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cinder-space-1-5);
    margin: 0 0 var(--cinder-space-1-5);
    padding: 0;
    border: 0;
    border-radius: var(--cinder-radius-sm);
    background: transparent;
    color: var(--cinder-text-default);
    font: inherit;
    font-weight: var(--cinder-font-semibold);
    text-align: start;
  }

  button.cinder-tool-call-rail__summary {
    align-self: flex-start;
    cursor: pointer;
  }

  button.cinder-tool-call-rail__summary:focus-visible,
  .cinder-tool-call-rail__row:focus-visible,
  .cinder-tool-call-rail__more:focus-visible,
  .cinder-tool-call-rail__link:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  .cinder-tool-call-rail__summary-marker {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--_cinder-tool-call-rail-marker-size);
    block-size: var(--_cinder-tool-call-rail-marker-size);
    color: var(--cinder-text-subtle);
  }

  .cinder-tool-call-rail .cinder-spinner[data-cinder-size='sm'] {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }

  .cinder-tool-call-rail__chevron {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  .cinder-tool-call-rail__summary-separator,
  .cinder-tool-call-rail__summary-duration {
    color: var(--cinder-text-subtle);
    font-weight: var(--cinder-font-normal);
  }

  /* A comma ends the words before it, so it takes back the gap that would stand between them. */
  .cinder-tool-call-rail__summary-separator {
    margin-inline-start: calc(var(--cinder-space-1-5) * -1);
  }

  .cinder-tool-call-rail__count {
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1);
    color: var(--cinder-text-subtle);
    font-weight: var(--cinder-font-medium);
  }

  .cinder-tool-call-rail__count-dot {
    flex: none;
    inline-size: var(--_cinder-tool-call-rail-dot-size);
    block-size: var(--_cinder-tool-call-rail-dot-size);
    border-radius: var(--cinder-radius-full);
    background: var(--cinder-status-danger-solid);
  }

  .cinder-tool-call-rail__count[data-cinder-count='waiting'] .cinder-tool-call-rail__count-dot {
    background: var(--cinder-status-warning-indicator);
  }

  /* ----------------------------------------
 * The rail and its rows
 * ---------------------------------------- */

  /* One or two calls are plain rows: Timeline still draws their markers, with no connector. */
  .cinder-tool-call-rail[data-cinder-plain] .cinder-timeline-item__event::before {
    display: none;
  }

  /* The connector runs behind the markers in the rail's quiet colour. */
  .cinder-tool-call-rail .cinder-timeline-item__event::before {
    background: var(--cinder-fill-disabled);
  }

  .cinder-tool-call-rail__item {
    position: relative;
  }

  /* A row is one line that never wraps: name, key input, result and duration, with the marker
     Timeline draws in the column before it. The row bleeds past the rail on both sides and back over
     the marker column, so a selected row's tint and ring wrap the marker too. */
  .cinder-tool-call-rail__row {
    box-sizing: border-box;
    display: grid;
    grid-template-columns:
      var(--cinder-tool-call-rail-name-width, 7.75rem)
      var(--cinder-tool-call-rail-input-width, 7.25rem)
      minmax(0, 1fr)
      var(--cinder-tool-call-rail-duration-width, 3rem);
    column-gap: var(--cinder-space-2-5);
    align-items: center;
    inline-size: calc(
      100% + var(--_cinder-tool-call-rail-indent) + 2 * var(--_cinder-tool-call-rail-bleed)
    );
    min-block-size: 1.625rem;
    margin: 0 calc(-1 * var(--_cinder-tool-call-rail-bleed)) 0
      calc(-1 * (var(--_cinder-tool-call-rail-indent) + var(--_cinder-tool-call-rail-bleed)));
    padding: 0 var(--_cinder-tool-call-rail-bleed) 0
      calc(var(--_cinder-tool-call-rail-indent) + var(--_cinder-tool-call-rail-bleed));
    border: 0;
    border-radius: var(--cinder-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
  }

  button.cinder-tool-call-rail__row {
    cursor: pointer;
  }

  @media (hover: hover) {
    button.cinder-tool-call-rail__row:hover {
      background: var(--cinder-surface-hover);
    }
  }

  /* The row whose panel is open: tinted, and it keeps the quiet ring while focus is elsewhere. */
  .cinder-tool-call-rail__item[data-cinder-selected] > .cinder-tool-call-rail__row {
    background: color-mix(in oklch, var(--cinder-accent-solid), transparent 92%);
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  .cinder-tool-call-rail__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--_cinder-tool-call-rail-marker-size);
    block-size: var(--_cinder-tool-call-rail-marker-size);
  }

  .cinder-tool-call-rail__dot {
    flex: none;
    inline-size: var(--_cinder-tool-call-rail-dot-size);
    block-size: var(--_cinder-tool-call-rail-dot-size);
    border-radius: var(--cinder-radius-full);
    background: var(--cinder-text-disabled);
  }

  .cinder-tool-call-rail__dot[data-cinder-faint] {
    background: var(--cinder-fill-disabled);
  }

  .cinder-tool-call-rail__marker[data-cinder-status='approved'] .cinder-tool-call-rail__dot {
    background: var(--cinder-status-success-solid);
  }

  .cinder-tool-call-rail__glyph {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  .cinder-tool-call-rail__marker[data-cinder-status='failed'],
  .cinder-tool-call-rail__marker[data-cinder-status='interrupted'] {
    color: var(--cinder-status-danger-text);
  }

  .cinder-tool-call-rail__marker[data-cinder-status='failed'] .cinder-tool-call-rail__glyph {
    stroke-width: 2.5;
  }

  .cinder-tool-call-rail__marker[data-cinder-status='waiting'] {
    color: var(--cinder-status-warning-text);
  }

  .cinder-tool-call-rail__marker[data-cinder-status='denied'] {
    color: var(--cinder-text-subtle);
  }

  .cinder-tool-call-rail__name {
    grid-column: 1;
    min-inline-size: 0;
    overflow: hidden;
    color: var(--cinder-text-default);
    font-weight: var(--cinder-font-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Wide: input and result are cells of the row's grid. Narrow: they are one line under the name. */
  .cinder-tool-call-rail__detail {
    display: contents;
  }

  .cinder-tool-call-rail__input,
  .cinder-tool-call-rail__result {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cinder-tool-call-rail__input {
    grid-column: 2;
    color: var(--cinder-text-subtle);
  }

  .cinder-tool-call-rail__result {
    grid-column: 3;
    color: var(--cinder-text-muted);
  }

  .cinder-tool-call-rail__item[data-cinder-status='failed'] .cinder-tool-call-rail__result,
  .cinder-tool-call-rail__item[data-cinder-status='interrupted'] .cinder-tool-call-rail__result {
    color: var(--cinder-status-danger-text);
  }

  .cinder-tool-call-rail__item[data-cinder-status='waiting'] .cinder-tool-call-rail__result {
    color: var(--cinder-status-warning-text);
  }

  .cinder-tool-call-rail__item[data-cinder-status='running'] .cinder-tool-call-rail__result {
    color: var(--cinder-text-subtle);
  }

  /* A result that links somewhere: the arrow and the words are one link in the accent, above the
     button that covers a selectable row, so the row selects everywhere but on the link. */
  .cinder-tool-call-rail__result-link {
    position: relative;
    z-index: 1;
    color: var(--cinder-accent-text);
    text-decoration: none;
    text-underline-offset: 0.15em;
  }

  @media (hover: hover) {
    .cinder-tool-call-rail__result-link:hover {
      text-decoration: underline;
    }
  }

  .cinder-tool-call-rail__result-link:focus-visible {
    border-radius: var(--cinder-radius-sm);
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  /* A selectable row with a linked result is a container, and its button covers it. */
  .cinder-tool-call-rail__row[data-cinder-linked] {
    position: relative;
    cursor: pointer;
  }

  .cinder-tool-call-rail__hit {
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
  }

  .cinder-tool-call-rail__hit:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  @media (hover: hover) {
    .cinder-tool-call-rail__row[data-cinder-linked]:hover {
      background: var(--cinder-surface-hover);
    }
  }

  .cinder-tool-call-rail__duration {
    grid-column: 4;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-xs);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }

  /* ----------------------------------------
 * A failed call: one danger line with its consequence, then quiet links. No filled block.
 * ---------------------------------------- */

  .cinder-tool-call-rail__failure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cinder-space-0-5) 0.875rem;
    margin: 0 0 var(--cinder-space-1);
    color: var(--cinder-status-danger-text);
    font-size: var(--cinder-text-sm);
    line-height: 1.1875rem;
  }

  .cinder-tool-call-rail__failure-text {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--cinder-space-1-5);
    min-inline-size: 0;
  }

  .cinder-tool-call-rail__failure-glyph {
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    margin-block-start: 0.125rem;
  }

  /* The links sit on their own line beneath the danger text, lined up with the text, not the glyph. */
  .cinder-tool-call-rail__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    padding-inline-start: calc(0.875rem + var(--cinder-space-1-5));
  }

  .cinder-tool-call-rail__link {
    padding: 0;
    border: 0;
    border-radius: var(--cinder-radius-sm);
    background: transparent;
    color: var(--cinder-accent-text);
    cursor: pointer;
    font: inherit;
    font-size: var(--cinder-text-sm);
  }

  @media (hover: hover) {
    .cinder-tool-call-rail__link:hover {
      text-decoration: underline;
    }
  }

  /* What sits under a row: the approval a waiting call is waiting on. */
  .cinder-tool-call-rail__nested {
    margin: var(--cinder-space-1) 0;
    min-inline-size: 0;
  }

  /* ----------------------------------------
 * A folded group: one dashed button and what it hides, counted from this turn only
 * ---------------------------------------- */

  /* The dashed button sits level with the marker Timeline draws beside it, 0.8125rem down. */
  .cinder-tool-call-rail__group {
    min-block-size: 1.875rem;
    padding-block-start: 0.0625rem;
  }

  .cinder-tool-call-rail__group-body {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2-5);
    min-inline-size: 0;
  }

  .cinder-tool-call-rail__more {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--cinder-space-1);
    block-size: 1.5rem;
    padding: 0 var(--cinder-space-2-5);
    border: 1px dashed var(--cinder-border-control);
    border-radius: var(--cinder-radius-sm);
    background: var(--cinder-surface-raised);
    color: var(--cinder-text-muted);
    cursor: pointer;
    font: inherit;
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-tool-call-rail__more-chevron {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }

  .cinder-tool-call-rail__group-summary {
    min-inline-size: 0;
    overflow: hidden;
    color: var(--cinder-text-subtle);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cinder-tool-call-rail__group-summary-short {
    display: none;
  }

  /* "Show fewer" folds every open group again, after the last row. */
  .cinder-tool-call-rail__fewer {
    margin-block-start: var(--cinder-space-0-5);
    padding-inline-start: var(--_cinder-tool-call-rail-indent);
  }

  .cinder-tool-call-rail__fewer .cinder-tool-call-rail__link {
    block-size: 1.625rem;
    padding: 0 var(--cinder-space-2-5);
    font-weight: var(--cinder-font-medium);
  }

  /* ----------------------------------------
 * The run's end state, and a footnote
 * ---------------------------------------- */

  .cinder-tool-call-rail__end {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2-5);
    min-block-size: 1.5rem;
    margin: var(--cinder-space-1) 0 0;
    color: var(--cinder-text-subtle);
  }

  .cinder-tool-call-rail__end-glyph {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }

  .cinder-tool-call-rail__footnote {
    margin: var(--cinder-space-2-5) 0 0;
    color: var(--cinder-text-subtle);
  }

  /* ----------------------------------------
 * A narrow container (a phone): two lines per row, 44px tall, a hairline between rows, and no
 * connector. Line one is the name and the duration; line two is the muted key input and result.
 * ---------------------------------------- */

  @container cinder-tool-call-rail (max-width: 28rem) {
    .cinder-tool-call-rail .cinder-timeline-item__event::before,
    .cinder-tool-call-rail__summary-duration,
    .cinder-tool-call-rail__summary-separator[data-cinder-duration],
    .cinder-tool-call-rail__failure {
      display: none;
    }

    /* Timeline's rows are 1.625rem tall with the marker 0.375rem down, which is a one-line row. A
       phone's rows are two lines whose first line is centred 1rem down, so the marker moves to
       0.5625rem and the hairline between rows replaces the gap. */
    .cinder-tool-call-rail__list {
      /* @runtime-state */
      --cinder-timeline-row-gap: 0px;
      /* @runtime-state */
      --cinder-timeline-row-marker-offset: 0.5625rem;
    }

    .cinder-tool-call-rail .cinder-timeline-item {
      border-block-end: 1px solid var(--cinder-border-muted);
    }

    .cinder-tool-call-rail .cinder-timeline-item:last-child {
      border-block-end: 0;
    }

    .cinder-tool-call-rail__row {
      grid-template-columns: minmax(0, 1fr) auto;
      row-gap: 0;
      min-block-size: var(--cinder-touch-target-min);
      padding-block: var(--cinder-space-1-5);
    }

    .cinder-tool-call-rail__name {
      grid-column: 1;
      grid-row: 1;
    }

    .cinder-tool-call-rail__duration {
      grid-column: 2;
      grid-row: 1;
    }

    .cinder-tool-call-rail__detail {
      display: block;
      grid-column: 1 / 3;
      grid-row: 2;
      min-inline-size: 0;
      overflow: hidden;
      color: var(--cinder-text-subtle);
      font-size: var(--cinder-text-sm);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cinder-tool-call-rail__input,
    .cinder-tool-call-rail__result {
      display: inline;
      color: inherit;
    }

    .cinder-tool-call-rail__input:not(:last-child)::after {
      content: ', ';
    }

    .cinder-tool-call-rail__item[data-cinder-status='failed'] .cinder-tool-call-rail__detail,
    .cinder-tool-call-rail__item[data-cinder-status='interrupted'] .cinder-tool-call-rail__detail {
      color: var(--cinder-status-danger-text);
    }

    .cinder-tool-call-rail__item[data-cinder-status='waiting'] .cinder-tool-call-rail__detail {
      color: var(--cinder-status-warning-text);
    }

    .cinder-tool-call-rail__group {
      min-block-size: var(--cinder-touch-target-min);
      padding-block-start: 0;
    }

    .cinder-tool-call-rail__group-summary-long {
      display: none;
    }

    .cinder-tool-call-rail__group-summary-short {
      display: inline;
    }

    .cinder-tool-call-rail__more {
      block-size: 2rem;
    }
  }

  @media (forced-colors: active) {
    .cinder-tool-call-rail .cinder-timeline-item__event::before {
      background: ButtonText;
    }

    .cinder-tool-call-rail__dot,
    .cinder-tool-call-rail__count-dot {
      forced-color-adjust: none;
      background: CanvasText;
    }

    .cinder-tool-call-rail__item[data-cinder-selected] > .cinder-tool-call-rail__row {
      outline: 1px solid Highlight;
      box-shadow: none;
    }

    .cinder-tool-call-rail__row:focus-visible,
    .cinder-tool-call-rail__hit:focus-visible,
    .cinder-tool-call-rail__result-link:focus-visible,
    .cinder-tool-call-rail__more:focus-visible,
    .cinder-tool-call-rail__link:focus-visible,
    button.cinder-tool-call-rail__summary:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      box-shadow: none;
    }
  }
}