trajectory-ui.css

.compact-gold {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 8px 0 12px;
  padding: 6px 9px;
  border: 1px solid #755b16;
  border-radius: 7px;
  background: #2b2412;
}
.compact-gold-label { color: #fbbf24; font-size: 11px; font-weight: 700; white-space: nowrap; }
.compact-gold-pills { display: flex; gap: 5px; overflow-x: auto; min-width: 0; }
.compact-gold-pill { padding: 2px 8px; border: 1px solid #755b16; border-radius: 999px; color: #fde68a; background: #211c10; font-size: 12px; white-space: nowrap; }
.compact-gold-empty { color: var(--muted); font-size: 12px; font-style: italic; }
.compact-supporting { margin: 8px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.compact-supporting > summary { cursor: pointer; padding: 8px 11px; color: var(--muted); font-size: 12px; font-weight: 650; }
.compact-supporting-body { padding: 0 11px 11px; }
.pretty-trajectory { margin-top: 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); }
.pretty-trajectory > summary { cursor: pointer; padding: 10px 13px; color: #93c5fd; font-weight: 700; }
.pretty-steps { display: flex; flex-direction: column; gap: 9px; padding: 0 11px 11px; }
.pretty-step { border: 1px solid var(--border); border-radius: 7px; background: #12151c; padding: 9px; }
.pretty-step-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.pretty-step-index, .pretty-kind { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pretty-tool-pill { padding: 2px 7px; border: 1px solid #334155; border-radius: 5px; color: #c4b5fd; background: #1f2430; font: 11px ui-monospace, monospace; }
.tool-bash .pretty-tool-pill { color: #6ee7b7; border-color: #237758; }
.tool-python .pretty-tool-pill { color: #a5b4fc; border-color: #4f46e5; }
.tool-read_file .pretty-tool-pill { color: #cbd5e1; }
.pretty-label { margin: 7px 0 4px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pretty-label span { margin-left: 5px; font-weight: 400; text-transform: none; }
.pretty-input, .pretty-output { margin: 0; padding: 8px 9px; border: 1px solid #252b36; border-radius: 5px; background: #0d1117; color: #d1d5db; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 ui-monospace, monospace; }
.pretty-model-text { padding: 7px 9px; border-left: 2px solid #475569; border-radius: 4px; background: #1a1f29; color: #d1d5db; white-space: pre-wrap; line-height: 1.5; }
.pretty-output-wrap.collapsed .pretty-output { max-height: 9em; overflow: hidden; mask-image: linear-gradient(to bottom,#000 65%,transparent); }
.pretty-output-toggle { margin-top: 5px; padding: 3px 9px; border: 1px solid #334155; border-radius: 5px; background: #1f2937; color: #93c5fd; cursor: pointer; font-size: 11px; }