.conversation-view { display: grid; gap: 20px; }
.conversation-view h3 { margin: 0; }
.conversation-heading, .conversation-labels { display: flex; align-items: center; gap: 8px; }
.conversation-heading { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.conversation-labels { flex-wrap: wrap; }
.conversation-summary { padding: 14px; border: 1px solid #e7e5e4; border-radius: 7px; }
.conversation-summary .conversation-heading { align-items: flex-start; }
.conversation-summary .conversation-heading p { margin-top: 4px; }
.conversation-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid #e7e5e4; border-radius: 5px; background: #e7e5e4; }
.conversation-metrics > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #fafaf9; }
.conversation-metrics strong { color: #292524; font-size: 15px; }
.conversation-tone-good { color: #166534; background: #f0fdf4; }
.conversation-tone-warn { color: #92400e; background: #fffbeb; }
.conversation-tone-bad { color: #b91c1c; background: #fef2f2; }
.conversation-tone-info { color: #0369a1; background: #f0f9ff; }
.conversation-diagnosis { margin-top: 14px; padding: 10px 12px; border-left: 3px solid; border-radius: 0 5px 5px 0; }
.conversation-diagnosis p { margin-top: 3px; white-space: pre-wrap; }
.conversation-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.conversation-evidence > div { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid #e7e5e4; border-radius: 5px; }
.conversation-view code { font-size: 12px; overflow-wrap: anywhere; }
.conversation-assets { display: grid; gap: 8px; margin-top: 10px; }
.conversation-assets > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border: 1px solid #e7e5e4; border-radius: 5px; }
.conversation-modes { flex: none; margin: 0; }
.conversation-modes button { padding: 6px 10px; font-size: 12px; }
.conversation-node { position: relative; padding: 8px 0 0 24px; }
.conversation-node::before { content: ""; position: absolute; left: 5px; top: 23px; bottom: -23px; width: 1px; background: #d6d3d1; }
.conversation-node:last-child::before { display: none; }
.conversation-node::after { content: ""; position: absolute; left: 1px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: #a8a29e; }
.conversation-node.current::after { background: #0284c7; }
.conversation-node.failed::after { background: #dc2626; }
.conversation-node-card { overflow: hidden; border: 1px solid #e7e5e4; border-radius: 6px; }
.conversation-node.current .conversation-node-card { border-color: #7dd3fc; }
.conversation-node.failed .conversation-node-card { border-color: #fca5a5; }
.conversation-node-body { padding: 10px 12px; }
.conversation-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 Consolas, monospace; }
.conversation-preview:empty { display: none; }
.conversation-view details { border-top: 1px solid #e7e5e4; background: #fafaf9; }
.conversation-view summary { padding: 7px 12px; color: #78716c; cursor: pointer; font-size: 12px; }
.conversation-view details[open] > pre { animation: conversation-expand .16s ease-out; }
.conversation-view pre { border-radius: 0; }
.conversation-raw { overflow: hidden; border: 1px solid #e7e5e4; border-radius: 6px; }
@keyframes conversation-expand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .conversation-view details[open] > pre { animation: none; } }
@media (max-width: 680px) {
  .conversation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conversation-evidence { grid-template-columns: 1fr; }
  .conversation-summary { padding: 10px; }
  .conversation-node { padding-left: 18px; }
}