/* trajectory 实验页的少量专属样式。 */

.tj-grid {
  display: grid;
  grid-template-columns: minmax(220px, 5fr) 7fr;
  gap: var(--space-sm);
}

@media (max-width: 860px) {
  .tj-grid { grid-template-columns: 1fr; }
}

.tj-pane { min-width: 0; }

.tj-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.tj-event {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
}

.tj-event strong { font-family: var(--mono); font-size: 0.78rem; }
.tj-event small { color: var(--muted); font-size: 0.76rem; overflow-wrap: anywhere; }
.tj-event.is-applied { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.tj-event.is-current { outline: 2px solid var(--brand); }
.tj-event.is-future { opacity: 0.38; }

.tj-cards-placeholder, #traj-cards { display: flex; flex-direction: column; gap: var(--space-2xs); }

.tj-card {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.tj-card.is-user { align-self: flex-end; max-width: 85%; background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.tj-card.is-assistant.is-streaming { border-style: dashed; color: var(--muted); }
.tj-card.is-tool.is-pending { border-style: dashed; }

.tj-tag { display: block; margin-top: 6px; color: var(--muted); font-size: 0.72rem; }
.tj-tag.is-state-pending { color: var(--warning-ink, var(--warning)); }
.tj-tag.is-state-settled { color: var(--allow-ink); }

.tj-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.tj-card-head code { font-size: 0.78rem; margin-inline-end: auto; }
.tj-view-chip { font-family: var(--mono); font-size: 0.72rem; color: var(--signal-ink, var(--signal)); border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

@media (forced-colors: active) {
  .tj-card, .tj-event { border: 1px solid CanvasText; }
}

/* 事件行可点击跳步：给一个明确的指针反馈。 */
.tj-event { cursor: pointer; }