body{margin:0;font-family:Arial,sans-serif;background:#f5f6fa;color:#1f2937}
.layout{display:grid;grid-template-columns:420px 1fr;gap:14px;padding:14px;align-items:start}
.panel{background:#fff;border-radius:12px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.conversation-panel{grid-column:1;grid-row:1}.diagnostics-panel{grid-column:1;grid-row:2}.graphpanel{grid-column:2;grid-row:1/span 2}.state{grid-column:2;grid-row:3}
h1{margin-top:0}.panel-heading-row,.graph-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading-row h2,.graph-heading-row h2{margin:0}.small{font-size:12px}
.row{display:flex;gap:8px}.input-row{margin-top:10px}
textarea#inputText{flex:1;padding:10px;border:1px solid #d1d5db;border-radius:8px;min-height:92px;resize:vertical;line-height:1.45;font:inherit}
button{padding:10px 14px;border:none;background:#2563eb;color:white;border-radius:8px;cursor:pointer}.control-row{margin-top:8px}
.conversation{height:360px;overflow:auto;border:1px solid #dbe4f0;border-radius:12px;padding:12px;background:#f8fafc;margin-top:10px}
.conversation .msg{max-width:82%;width:max-content}.conversation .msg.user{margin-left:auto;background:#2563eb;color:#fff}.conversation .msg.engine{margin-right:auto;background:#fff;color:#1f2937;border:1px solid #e5e7eb}.conversation .msg .label{opacity:.6}
.terminal{height:300px;overflow:auto;background:#0b1020;color:#e5e7eb;border:1px solid #111827;border-radius:10px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:10px}
.msg{margin:0 0 10px 0;padding:8px 10px;border-radius:8px;white-space:pre-wrap;word-break:break-word}.msg.user{background:#172554;color:#dbeafe}.msg.engine{background:#111827;color:#e5e7eb}.msg .label{display:block;font-size:11px;opacity:.75;margin-bottom:4px}
.diagnostics{margin-top:10px;font-size:13px}.diagnostics div{margin-top:8px}.scroll{max-height:240px;overflow:auto;border:1px solid #e5e7eb;border-radius:8px;padding:8px;background:#fafafa}
.muted{color:#6b7280}.entry{margin-bottom:8px}.counts{margin-bottom:8px;font-size:13px}
.graphpanel{min-height:900px}#graphCanvas{height:840px;min-height:840px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:white}#graphSvg{width:100%;height:100%;display:block}
.graph-edge{stroke:#cbd5e1;stroke-width:1.2;opacity:.8}.graph-node{fill:#2563eb;stroke:#fff;stroke-width:1.5}.node-label{font-size:11px}.edge-label{font-size:9px;fill:#6b7280}
.prediction{border-bottom:1px solid #e5e7eb;padding:6px 0}.prediction:last-child{border-bottom:none}.state h2{margin-top:14px}.state h2:first-child{margin-top:0}
.hypothesis-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#4b5563;white-space:nowrap}.hypothesis-toggle input{margin:0}
.graph-node.hypothesis{fill:none;stroke:#6b7280;stroke-width:1.5;stroke-dasharray:3 2}.graph-edge.hypothesis{stroke:#9ca3af;stroke-dasharray:4 3;opacity:.65}
@media(max-width:1000px){.layout{grid-template-columns:1fr}.conversation-panel,.diagnostics-panel,.graphpanel,.state{grid-column:1;grid-row:auto}}