.agent-flow{--af-font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--af-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--af-radius: 10px;--af-radius-sm: 6px;font-family:var(--af-font);font-size:13.5px;line-height:1.55;border-radius:var(--af-radius);overflow:hidden;height:100%;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.agent-flow--dark{--af-bg: #0f1117;--af-bg-raised: #161822;--af-bg-hover: #1c1f2e;--af-surface: #1e2133;--af-border: #2a2d3e;--af-border-subtle: #222538;--af-text: #e2e4ed;--af-text-secondary: #8b8fa4;--af-text-tertiary: #5c6078;--af-accent: #6e8bfa;--af-accent-muted: rgba(110, 139, 250, .12);background:var(--af-bg);color:var(--af-text);border:1px solid var(--af-border)}.agent-flow--light{--af-bg: #ffffff;--af-bg-raised: #f8f9fb;--af-bg-hover: #f0f1f5;--af-surface: #f4f5f7;--af-border: #e2e4ea;--af-border-subtle: #ecedf1;--af-text: #1a1d2e;--af-text-secondary: #6b7085;--af-text-tertiary: #9ca0b3;--af-accent: #4f6ef7;--af-accent-muted: rgba(79, 110, 247, .08);background:var(--af-bg);color:var(--af-text);border:1px solid var(--af-border)}.agent-flow__header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--af-border);background:var(--af-bg-raised);flex-shrink:0}.agent-flow__header-left{display:flex;align-items:center;gap:10px}.agent-flow__header-right{display:flex;align-items:center;gap:8px}.agent-flow__status{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--af-text-secondary)}.agent-flow__event-count{font-size:11.5px;color:var(--af-text-tertiary);font-family:var(--af-mono);font-weight:400}.agent-flow__status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.agent-flow__status-dot--connecting{background:#f59e0b;animation:pulse 2s infinite}.agent-flow__status-dot--connected{background:#10b981;box-shadow:0 0 0 3px #10b98133}.agent-flow__status-dot--disconnected{background:var(--af-text-tertiary)}.agent-flow__status-dot--error{background:#ef4444;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.agent-flow__connect-btn{padding:5px 12px;border:none;border-radius:var(--af-radius-sm);cursor:pointer;font-size:12px;font-weight:500;font-family:var(--af-font);background:var(--af-accent);color:#fff;transition:opacity .15s}.agent-flow__connect-btn:hover{opacity:.85}.agent-flow__events-wrapper{flex:1;position:relative;overflow:hidden;min-height:0}.agent-flow__events{height:100%;overflow-y:auto;padding:12px;scrollbar-gutter:stable}.agent-flow__events-viewport{position:relative;width:100%}.agent-flow__event-row{padding-bottom:8px;contain:layout style}.agent-flow__event{display:flex;gap:10px;padding:10px 12px;border-radius:var(--af-radius-sm);border:1px solid transparent;contain:content;will-change:transform;transition:background .15s,border-color .15s}.agent-flow--dark .agent-flow__event,.agent-flow--light .agent-flow__event{background:var(--af-surface)}.agent-flow--dark .agent-flow__event:hover{background:var(--af-bg-hover);border-color:var(--af-border-subtle)}.agent-flow--light .agent-flow__event:hover{background:var(--af-bg-hover);border-color:var(--af-border)}.agent-flow__event--start{border-left:2.5px solid #3b82f6}.agent-flow__event--thinking{border-left:2.5px solid #8b5cf6}.agent-flow__event--tool_call{border-left:2.5px solid #f59e0b}.agent-flow__event--tool_result{border-left:2.5px solid #10b981}.agent-flow__event--message{border-left:2.5px solid #06b6d4}.agent-flow__event--error{border-left:2.5px solid #ef4444}.agent-flow__event--end{border-left:2.5px solid #10b981}.agent-flow__event-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;border-radius:5px;color:var(--af-text-secondary);margin-top:1px}.agent-flow__event--start .agent-flow__event-icon{color:#3b82f6;background:#3b82f61a}.agent-flow__event--thinking .agent-flow__event-icon{color:#8b5cf6;background:#8b5cf61a}.agent-flow__event--tool_call .agent-flow__event-icon{color:#f59e0b;background:#f59e0b1a}.agent-flow__event--tool_result .agent-flow__event-icon{color:#10b981;background:#10b9811a}.agent-flow__event--message .agent-flow__event-icon{color:#06b6d4;background:#06b6d41a}.agent-flow__event--error .agent-flow__event-icon{color:#ef4444;background:#ef44441a}.agent-flow__event--end .agent-flow__event-icon{color:#10b981;background:#10b9811a}.agent-flow__event-content{flex:1;min-width:0}.agent-flow__event-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.agent-flow__event-type{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--af-text-tertiary)}.agent-flow__event-time{font-size:11px;color:var(--af-text-tertiary);font-family:var(--af-mono);font-weight:400;margin-left:auto}.agent-flow__agent-badge{padding:1px 7px;border-radius:4px;font-size:10.5px;font-weight:600;letter-spacing:.02em;background:var(--af-accent);color:#fff}.agent-flow__duration{font-size:11px;color:var(--af-text-tertiary);font-family:var(--af-mono);font-weight:400}.agent-flow__cost,.agent-flow__tokens{font-size:11px;color:var(--af-text-tertiary);font-family:var(--af-mono);font-weight:400;padding:1px 6px;background:var(--af-accent-muted);border-radius:4px}.agent-flow__agent-filter{padding:4px 10px;border:1px solid var(--af-border);border-radius:var(--af-radius-sm);font-size:12px;font-family:var(--af-font);cursor:pointer;background:transparent;color:var(--af-text-secondary);transition:border-color .15s}.agent-flow__agent-filter:hover{border-color:var(--af-accent)}.agent-flow__event-message{margin:6px 0 0;word-wrap:break-word;color:var(--af-text);font-size:13px;line-height:1.6}.agent-flow__markdown{margin-top:6px;word-wrap:break-word;font-size:13px;line-height:1.6}.agent-flow__markdown h1,.agent-flow__markdown h2,.agent-flow__markdown h3,.agent-flow__markdown h4{margin:10px 0 4px;font-weight:600}.agent-flow__markdown h1{font-size:1.25em}.agent-flow__markdown h2{font-size:1.1em}.agent-flow__markdown h3{font-size:1em}.agent-flow__markdown p{margin:4px 0}.agent-flow__markdown ul,.agent-flow__markdown ol{margin:4px 0;padding-left:18px}.agent-flow__markdown li{margin:1px 0}.agent-flow__markdown code{padding:1px 5px;border-radius:4px;font-family:var(--af-mono);font-size:.88em;font-weight:500}.agent-flow--dark .agent-flow__markdown code{background:#6e8bfa1a;color:#a5b4fc}.agent-flow--light .agent-flow__markdown code{background:#4f6ef70f;color:#4f6ef7}.agent-flow__markdown pre{margin:6px 0;padding:10px 12px;border-radius:var(--af-radius-sm);overflow-x:auto;font-size:12px;line-height:1.5}.agent-flow__markdown pre code{padding:0;background:none;color:inherit;font-weight:400}.agent-flow--dark .agent-flow__markdown pre{background:var(--af-bg);color:#a5b4fc}.agent-flow--light .agent-flow__markdown pre{background:var(--af-bg-raised);color:#374151}.agent-flow__markdown blockquote{margin:6px 0;padding:4px 12px;border-left:2.5px solid var(--af-accent);color:var(--af-text-secondary)}.agent-flow__markdown table{border-collapse:collapse;margin:6px 0;font-size:12.5px}.agent-flow__markdown th,.agent-flow__markdown td{padding:4px 10px;border:1px solid var(--af-border)}.agent-flow__markdown th{font-weight:600;background:var(--af-surface)}.agent-flow__markdown a{color:var(--af-accent);text-decoration:none}.agent-flow__markdown a:hover{text-decoration:underline}.agent-flow__event-tool{margin-top:6px}.agent-flow__tool-header{display:flex;align-items:center;gap:6px}.agent-flow__tool-name{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:11.5px;font-family:var(--af-mono);font-weight:500}.agent-flow--dark .agent-flow__tool-name{background:#f59e0b1f;color:#fbbf24}.agent-flow--light .agent-flow__tool-name{background:#f59e0b14;color:#b45309}.agent-flow__tool-toggle{padding:1px 6px;border:none;border-radius:3px;cursor:pointer;font-size:10.5px;font-family:var(--af-mono);color:var(--af-text-tertiary);background:transparent;transition:color .15s}.agent-flow__tool-toggle:hover{color:var(--af-text-secondary)}.agent-flow__tool-args{position:relative;margin:6px 0 0;padding:8px 32px 8px 10px;border-radius:var(--af-radius-sm);font-family:var(--af-mono);font-size:11.5px;line-height:1.5;overflow-x:auto}.agent-flow__copy-btn{padding:4px;border:none;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s;color:var(--af-text-tertiary);background:transparent}.agent-flow__event:hover .agent-flow__copy-btn,.agent-flow__timeline-item:hover .agent-flow__copy-btn{opacity:.6}.agent-flow__copy-btn:hover{opacity:1!important;background:var(--af-border-subtle)}.agent-flow__tool-args .agent-flow__copy-btn{position:absolute;top:6px;right:6px}.agent-flow--dark .agent-flow__tool-args{position:relative;background:var(--af-bg);color:#a5b4fc}.agent-flow--light .agent-flow__tool-args{position:relative;background:var(--af-bg-raised);color:#374151}.agent-flow__event-result{position:relative;margin-top:6px;border-radius:var(--af-radius-sm);overflow:hidden}.agent-flow--dark .agent-flow__event-result{background:var(--af-bg);color:#a5b4fc}.agent-flow--light .agent-flow__event-result{background:var(--af-bg-raised);color:#374151}.agent-flow__event-result-actions{position:absolute;top:0;right:0;z-index:1;padding:6px;display:flex}.agent-flow__event-result-content{padding:8px 36px 8px 10px}.agent-flow__event-result .agent-flow__copy-btn{opacity:0}.agent-flow__event-result:hover .agent-flow__copy-btn{opacity:.6}.agent-flow__empty{text-align:center;padding:40px 24px;color:var(--af-text-tertiary);font-size:13px}.agent-flow__scroll-bottom{position:absolute;bottom:16px;right:16px;width:32px;height:32px;border:1px solid var(--af-border);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;transition:transform .15s,opacity .15s,background .15s;z-index:10;background:var(--af-bg-raised);color:var(--af-text-secondary)}.agent-flow__scroll-bottom:hover{transform:scale(1.08);background:var(--af-surface);color:var(--af-text)}.agent-flow__events::-webkit-scrollbar{width:6px}.agent-flow__events::-webkit-scrollbar-track{background:transparent}.agent-flow--dark .agent-flow__events::-webkit-scrollbar-thumb{background:#2a2d3e;border-radius:3px}.agent-flow--dark .agent-flow__events::-webkit-scrollbar-thumb:hover{background:#3d4060}.agent-flow--light .agent-flow__events::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.agent-flow--light .agent-flow__events::-webkit-scrollbar-thumb:hover{background:#b0b5c0}.agent-flow--timeline .agent-flow__events{padding:8px 12px 8px 4px}.agent-flow--timeline .agent-flow__event-row{padding-bottom:0}.agent-flow__timeline-item{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;contain:content;will-change:transform;border-radius:var(--af-radius-sm);transition:background .12s}.agent-flow__timeline-item:hover{background:var(--af-bg-hover)}.agent-flow__timeline-track{position:relative;width:36px;flex-shrink:0;display:flex;justify-content:center}.agent-flow__timeline-track:before{content:"";position:absolute;top:-8px;bottom:-8px;left:50%;width:1.5px;transform:translate(-50%)}.agent-flow__event-row:first-child .agent-flow__timeline-track:before{top:18px}.agent-flow__event-row:last-child .agent-flow__timeline-track:before{bottom:calc(100% - 18px)}.agent-flow--dark .agent-flow__timeline-track:before{background:var(--af-border)}.agent-flow--light .agent-flow__timeline-track:before{background:var(--af-border)}.agent-flow__timeline-dot{position:relative;z-index:1;width:8px;height:8px;border-radius:50%;margin-top:14px;flex-shrink:0;box-shadow:0 0 0 3px var(--af-bg)}.agent-flow__timeline-body{flex:1;min-width:0;padding:6px 10px 8px 2px}.agent-flow__timeline-header{display:flex;align-items:center;gap:7px;min-height:28px}.agent-flow__timeline-header .agent-flow__event-icon{width:22px;height:22px}.agent-flow__timeline-header .agent-flow__event-icon svg{width:13px;height:13px}.agent-flow__timeline-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}.agent-flow--dark .agent-flow__timeline-label,.agent-flow--light .agent-flow__timeline-label{color:var(--af-text-tertiary)}.agent-flow__timeline-summary{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--af-text-secondary)}.agent-flow__timeline-item--collapsed .agent-flow__timeline-summary{color:var(--af-text);font-weight:450}.agent-flow__timeline-chevron{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--af-text-tertiary);transition:transform .15s ease,color .15s}.agent-flow__timeline-chevron--open{transform:rotate(90deg)}.agent-flow__timeline-item:hover .agent-flow__timeline-chevron{color:var(--af-text-secondary)}.agent-flow__timeline-detail{margin-top:6px;padding:8px 0 4px 2px;animation:timeline-expand .15s ease}@keyframes timeline-expand{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.agent-flow__timeline-item--start .agent-flow__timeline-label{color:#3b82f6}.agent-flow__timeline-item--thinking .agent-flow__timeline-label{color:#8b5cf6}.agent-flow__timeline-item--tool_call .agent-flow__timeline-label{color:#f59e0b}.agent-flow__timeline-item--tool_result .agent-flow__timeline-label{color:#10b981}.agent-flow__timeline-item--message .agent-flow__timeline-label{color:#06b6d4}.agent-flow__timeline-item--error .agent-flow__timeline-label{color:#ef4444}.agent-flow__timeline-item--end .agent-flow__timeline-label{color:#10b981}.agent-flow__search-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--af-border);border-radius:var(--af-radius-sm);cursor:pointer;color:var(--af-text-secondary);background:transparent;transition:color .15s,border-color .15s,background .15s}.agent-flow__search-toggle:hover{color:var(--af-text);border-color:var(--af-text-tertiary);background:var(--af-bg-hover)}.agent-flow__search-toggle--active{color:var(--af-accent);border-color:var(--af-accent);background:var(--af-accent-muted)}.agent-flow__search-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--af-border);background:var(--af-bg-raised);flex-shrink:0}.agent-flow__search-bar svg{flex-shrink:0;color:var(--af-text-tertiary)}.agent-flow__search-input{flex:1;border:none;outline:none;background:transparent;color:var(--af-text);font-family:var(--af-font);font-size:13px;line-height:1.5}.agent-flow__search-input::placeholder{color:var(--af-text-tertiary)}.agent-flow__search-count{flex-shrink:0;font-size:11px;color:var(--af-text-tertiary);font-family:var(--af-mono);padding:1px 6px;background:var(--af-accent-muted);border-radius:4px}.agent-flow__search-close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;border-radius:3px;cursor:pointer;color:var(--af-text-tertiary);background:transparent;font-size:12px;transition:color .15s,background .15s}.agent-flow__search-close:hover{color:var(--af-text);background:var(--af-bg-hover)}.agent-flow--unsupported{opacity:.8}.agent-flow--unsupported .agent-flow__empty{line-height:1.8}