html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans)}*{box-sizing:border-box}.demo-app{display:flex;height:100%;width:100%;text-align:left}.demo-app .rail{--rail-w:35%;border-right:1px solid var(--border);overflow:auto}.rail-top{position:relative;padding-left:82px}.traffic{position:absolute;left:12px;display:flex;gap:7px}.traffic i{width:11px;height:11px;border-radius:50%;background:var(--red)}.traffic i:nth-child(2){background:var(--amber)}.traffic i:nth-child(3){background:var(--green)}.rail-symbols{margin-left:auto;color:var(--text-dim);font-size:17px}.demo-app .rail-section-label{margin-top:13px;margin-bottom:13px}.family-toggle{display:flex;align-items:center;gap:7px;margin:0 8px 8px;min-height:30px;padding:5px 10px;border:0;border-radius:6px;background:transparent;color:var(--text-dim);font:12px var(--sans);cursor:pointer}.family-toggle span{color:var(--text-faint)}.demo-app .session{display:block;width:calc(100% - 12px);border:1px solid transparent;text-align:left;background:transparent;font-family:var(--sans)}.demo-app button.session:hover{background:var(--line-1)}.demo-app .session.active{border-color:var(--line-3);background:var(--bg-hover)}.demo-app .session.child{padding-left:30px}.demo-app .session-meta{padding-left:20px}.demo-agent{width:13px;height:13px;flex:none;opacity:.8}.demo-tag{font-size:10px;white-space:nowrap;border:1px solid var(--line-3);border-radius:5px;padding:3px 6px;color:var(--text-dim);max-width:105px;overflow:hidden;text-overflow:ellipsis}.project-label{text-align:right;padding:15px 20px 8px;margin-top:18px;border-top:1px solid var(--border);font-size:10px;color:var(--text-dim)}.demo-reader{min-width:0;flex:1;display:flex;flex-direction:column;height:100%;background:var(--bg)}.demo-reader .session-header{padding:0 16px;gap:12px;height:44px}.history-icons{font-size:24px;color:var(--text-dim);white-space:nowrap}.demo-reader .state{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.demo-reader .ctx{font-family:var(--sans)}#expand{min-height:30px;white-space:nowrap;border:1px solid var(--border);border-radius:6px;background:var(--bg-raised);color:var(--text-dim);font:11px var(--sans);padding:5px 8px;cursor:pointer}.read-label{font-size:11px;border:1px solid var(--line-4);background:var(--bg-hover);border-radius:5px;padding:6px 8px}.demo-reader .answer-scroll{flex:1;height:auto;min-height:0}.demo-reader .answer-content{max-width:850px;margin:0 auto;padding:25px 28px 32px}.demo-reader .answer-user{font:12.5px/1.65 var(--mono);padding:14px 16px;border:1px solid var(--border);border-radius:9px;background:var(--bubble);margin-bottom:22px}.demo-reader .answer-user::before{content:'YOU';display:block;font:9px var(--sans);letter-spacing:.14em;color:var(--text-faint);margin-bottom:9px}.demo-process{font-size:12px;color:var(--text-dim);margin-bottom:24px}.demo-process summary{cursor:pointer;width:fit-content;min-height:28px;padding:5px 8px;border-radius:5px}.demo-process .answer-process-body{padding:9px 14px;line-height:1.8}.demo-reader .answer-agent{padding:0;font-size:14px;line-height:1.7}.demo-reader .answer-agent p{margin:0 0 16px}.demo-reader .answer-agent h3{font-size:15px;font-weight:600;margin:22px 0 10px}.demo-composer{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--border);font-size:12px;color:var(--text-faint)}.demo-composer>span:first-child{flex:1;border:1px solid var(--line-3);background:var(--bg-log);padding:9px 12px;border-radius:7px}.demo-send{padding:9px 24px;border-radius:7px;background:var(--line-5);color:var(--text-dim)}.flow{border:1px solid var(--border);border-radius:9px;padding:16px;margin:22px 0;background:var(--bg-log)}.flow svg{display:block;width:100%;height:auto}.flow rect{fill:var(--bg-raised);stroke:var(--mermaid-node-border)}.flow path{fill:none;stroke:var(--mermaid-line);stroke-width:1.2}.flow polygon{fill:var(--mermaid-line)}.flow text{fill:var(--text);font:13px var(--sans)}.flow .edge-label{fill:var(--text-dim);font-size:11px}.demo-app button:hover,.demo-process summary:hover{background:var(--bg-hover)}.demo-app button:focus-visible,.demo-process summary:focus-visible,.answer-scroll:focus-visible{outline:2px solid var(--text-dim);outline-offset:-2px;background:var(--bg-hover)}body[data-mode=expanded]{padding:18px;background:var(--bg-log)}body[data-mode=expanded] .demo-app{border:1px solid var(--line-3);border-radius:12px;overflow:hidden}body[data-mode=expanded] .rail{display:none}body[data-mode=expanded] .demo-reader{background:var(--bg-raised)}body[data-mode=expanded] .answer-content{padding-top:28px}body[data-mode=rail] .demo-reader{display:none}body[data-mode=rail] .rail{--rail-w:100%;border:0}body[data-mode=rail] .demo-app{overflow:auto}@media(max-width:650px){body:not([data-mode=rail]) .rail{display:none}.demo-reader .session-header{gap:8px;padding:0 10px}.demo-reader .ctx,.read-label{display:none}.demo-reader .state{flex:1}.demo-reader .answer-content{padding:20px 18px}.demo-reader .answer-agent{font-size:14px}body[data-mode=expanded]{padding:8px}.demo-composer{padding:10px}.demo-send{padding:9px 14px}}

.demo-app .session[hidden]{display:none}
@media(max-width:650px){.flow{overflow-x:auto}.flow svg{min-width:500px}}