*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a1a;--bg-surface: #12122a;--bg-card: #1a1a3a;--text: #e0e0f0;--text-dim: #8888aa;--text-muted: #b0b0cc;--accent: #ffd700;--accent-glow: rgba(255, 215, 0, .4);--accent-faint: rgba(255, 215, 0, .04);--accent-flash: rgba(255, 215, 0, .15);--tool-color: #ff6b6b;--success-color: #51cf66;--info-color: #88aaff;--warn-color: #ff9f43;--border: #2a2a4a;--border-soft: #222244;--border-strong: #333366;--border-muted: #444466;--scrollbar-thumb: #333355;--scrollbar-thumb-hover: #444477;--bubble-user-bg: #1a3a5c;--bubble-user-text: #c0ddff;--bubble-assistant-bg: #2a2a4a;--on-accent: var(--bg);--font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}[data-theme=light]{--bg: #f7f7fb;--bg-surface: #ffffff;--bg-card: #eceef5;--text: #1a1a2e;--text-dim: #5a5a78;--text-muted: #3a3a55;--accent: #a67c00;--accent-glow: rgba(166, 124, 0, .35);--accent-faint: rgba(166, 124, 0, .06);--accent-flash: rgba(166, 124, 0, .2);--tool-color: #c03434;--success-color: #2f8f44;--info-color: #0b63b8;--warn-color: #b86b20;--border: #d0d4e0;--border-soft: #e3e6ee;--border-strong: #b8bccc;--border-muted: #a8acbc;--scrollbar-thumb: #c0c4d0;--scrollbar-thumb-hover: #a0a4b4;--bubble-user-bg: #d9ecff;--bubble-user-text: #083458;--bubble-assistant-bg: #e7e9f1;--on-accent: #ffffff}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.5;overflow:hidden;transition:background .2s,color .2s}#app{display:flex;flex-direction:column;height:100vh;padding:.5rem 1rem;gap:.5rem}#header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.header-left h1{font-size:1.2rem;color:var(--accent);font-weight:700}.header-right{display:flex;align-items:center;gap:.5rem}#step-counter{font-family:var(--font-mono);font-size:.85rem;color:var(--text-dim);min-width:85px;text-align:right}.header-right button{padding:.3rem .75rem;font-size:.8rem;font-weight:600;font-family:var(--font-sans);background:var(--bg-card);color:var(--text);border:1px solid var(--border-strong);border-radius:6px;cursor:pointer;transition:all .15s}.header-right button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.header-right button:disabled{opacity:.3;cursor:not-allowed}.header-right button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.theme-toggle{background:var(--bg-card);color:var(--text);border:1px solid var(--border-strong);border-radius:6px;padding:.3rem .55rem;font-size:.95rem;line-height:1;cursor:pointer;margin-left:.25rem;transition:border-color .15s,color .15s,background .15s}.theme-toggle:hover{border-color:var(--accent)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#diagram-section{flex:2 1 40%;min-height:0;background:var(--bg-surface);border-radius:10px;padding:.75rem;border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center}#diagram-svg{width:100%;height:100%;max-height:100%}.node{fill:var(--bg-card);stroke:var(--border-strong);stroke-width:2;transition:stroke .3s,filter .3s}.node.glow{stroke:var(--accent);filter:drop-shadow(0 0 12px var(--accent-glow))}.node-label{fill:var(--text);font-size:16px;font-weight:600;text-anchor:middle;dominant-baseline:middle;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;pointer-events:none}.tool-item{fill:var(--text-dim);font-size:13px;font-family:SF Mono,Fira Code,monospace;transition:fill .3s;pointer-events:none}.tool-item.active{fill:var(--accent);font-weight:700}.tool-activity-line{fill:var(--text-dim);font-size:12px;font-family:SF Mono,Fira Code,monospace}.tool-activity-line.ta-name{fill:var(--accent);font-weight:700;font-size:13px}.tool-activity-line.ta-input{fill:var(--text-muted)}.tool-activity-line.ta-desc{fill:var(--text-dim);font-style:italic}.tool-activity-line.ta-output{fill:var(--success-color)}.tool-activity-line.ta-running{fill:var(--warn-color)}.tool-activity-line.ta-done{fill:var(--success-color);font-weight:700}.arrow{stroke:var(--border-muted);stroke-width:2.5;fill:none;opacity:0;transition:stroke-dashoffset .5s ease,opacity .2s}.arrow.active{stroke:var(--accent);opacity:1;marker-end:url(#arrow-head)}#bottom-section{flex:3 1 60%;min-height:0;display:flex;gap:.5rem}#bottom-section h2{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem;flex-shrink:0}#user-view-panel{flex:1 1 25%;min-width:0;background:var(--bg-surface);border-radius:10px;padding:.75rem;border:1px solid var(--border-soft);display:flex;flex-direction:column}#user-view{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;padding:.5rem 0}.uv-bubble{padding:.6rem .85rem;border-radius:12px;font-size:.95rem;line-height:1.5;max-width:95%;word-break:break-word;animation:uv-fade-in .3s ease-out}@keyframes uv-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.uv-user{background:var(--bubble-user-bg);color:var(--bubble-user-text);align-self:flex-end;border-bottom-right-radius:4px}.uv-assistant{background:var(--bubble-assistant-bg);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px}.uv-thinking{display:flex;gap:5px;padding:.6rem .85rem;align-self:flex-start}.uv-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);animation:uv-bounce 1.4s infinite}.uv-dot:nth-child(2){animation-delay:.2s}.uv-dot:nth-child(3){animation-delay:.4s}@keyframes uv-bounce{0%,80%,to{transform:translateY(0);opacity:.3}40%{transform:translateY(-6px);opacity:1}}#transcript-panel{flex:3 1 75%;min-width:0;background:var(--bg-surface);border-radius:10px;padding:.75rem;border:1px solid var(--border-soft);display:flex;flex-direction:column}#transcript{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.transcript-entry{font-size:1.15rem;font-family:var(--font-mono);line-height:1.5;padding:.35rem .5rem;border-radius:4px;background:transparent;border-left:3px solid transparent;transition:opacity .3s,border-color .3s,background .3s;opacity:.5}.transcript-entry.new{opacity:1;border-left-color:var(--accent);background:var(--accent-faint);animation:entry-flash .4s ease-out}@keyframes entry-flash{0%{background:var(--accent-flash)}to{background:var(--accent-faint)}}.transcript-role{font-weight:700;white-space:nowrap}.transcript-text{color:var(--text);white-space:pre-wrap;word-break:break-word}.hl-thinking{color:var(--info-color)}.hl-tool-call{color:var(--warn-color)}.hl-json{color:var(--success-color)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}@media(max-width:900px){#app{padding:.5rem}#header{flex-direction:column;gap:.5rem;align-items:flex-start}.header-right{flex-wrap:wrap}}