.live-trace-shell {
  margin-top: 18px;
  border: 1px solid #cfddd5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(24, 55, 43, 0.08);
}

.live-trace-shell details > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid transparent;
}

.live-trace-shell details[open] > summary { border-bottom-color: #e0e9e4; }
.live-trace-shell details > summary::-webkit-details-marker { display: none; }
.live-trace-shell details > summary::before { content: "+"; color: #50665b; font-size: 1.15rem; font-weight: 800; }
.live-trace-shell details[open] > summary::before { content: "−"; }
.live-trace-heading { display: grid; flex: 1; min-width: 0; }
.live-trace-heading span { color: #7a6950; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.live-trace-heading strong { color: #24342d; font-size: 0.98rem; }
.live-trace-status { padding: 5px 8px; border: 1px solid #d4dfd9; border-radius: 8px; color: #617168; background: #f7faf8; font-size: 0.7rem; white-space: nowrap; }
.live-trace-status[data-state="success"] { color: #0d6845; border-color: #a8d0b8; background: #eaf7ef; }
.live-trace-status[data-state="error"] { color: #9b3d31; border-color: #efc3bb; background: #fff0ed; }
.live-trace-content { padding: 16px 20px 20px; }
.live-trace-metadata { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.live-trace-metadata span { padding: 5px 8px; border-radius: 6px; color: #55675e; background: #eff5f1; font-size: 0.68rem; font-weight: 700; }
.live-trace-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 22px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x proximity; }
.live-trace-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; min-height: 132px; padding: 13px; border: 1px solid #d9e4de; border-top: 3px solid #607d70; border-radius: 8px; background: #fbfdfc; scroll-snap-align: start; }
.live-trace-step:not(:last-child)::after { content: "→"; position: absolute; top: 48%; right: -18px; color: #8ca097; font-weight: 900; }
.live-trace-step[data-kind="tool"] { border-top-color: #b57922; background: #fffaf2; }
.live-trace-step[data-kind="reasoning"] { border-top-color: #456b95; background: #f4f8fc; }
.live-trace-step[data-kind="response"] { border-top-color: #16805a; background: #f1faf5; }
.live-trace-step-number { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #fff; background: #435c51; font-size: 0.7rem; font-weight: 850; }
.live-trace-step-body { min-width: 0; }
.live-trace-step-body strong { display: block; color: #26372f; font-size: 0.82rem; line-height: 1.35; }
.live-trace-step-body p { margin: 6px 0 9px; color: #65766d; font-size: 0.72rem; line-height: 1.45; }
.live-trace-step-body small { color: #7c8d84; font-size: 0.65rem; font-weight: 750; }
.live-trace-empty, .live-trace-loading { padding: 20px; color: #64756d; background: #f8fbf9; font-size: 0.8rem; text-align: center; }
.live-trace-empty strong { display: block; color: #35483f; }
.live-trace-empty p { margin: 5px 0 0; }

@media (max-width: 680px) {
  .live-trace-shell details > summary { padding: 13px 14px; }
  .live-trace-content { padding: 13px; }
  .live-trace-flow { grid-auto-columns: minmax(235px, 82vw); }
  .live-trace-step { min-height: 122px; }
}