*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#1a1a2e;color:#eee}#app{width:100%;height:100%;display:flex;flex-direction:column}#toolbar{height:44px;background:#2a2a40;border-bottom:1px solid #3a3a5a;display:none;align-items:center;padding:0 12px;gap:12px;flex-shrink:0}#toolbar.visible{display:flex}#toolbar-back{background:none;border:none;color:#888;font-size:16px;cursor:pointer;padding:6px 10px;border-radius:4px;transition:all .15s;flex-shrink:0}#toolbar-back:hover{color:#fff;background:#ffffff1a}.toolbar-divider{width:1px;height:24px;background:#3a3a5a;flex-shrink:0}#toolbar-title{font-size:14px;font-weight:600;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1;position:relative;cursor:text;padding:2px 4px;margin:-2px -4px;border-radius:4px;transition:background .15s}#toolbar-title:hover{background:#ffffff0d}#toolbar-title:after{content:attr(data-full-title);position:absolute;left:0;top:100%;margin-top:8px;padding:8px 12px;background:#1a1a2e;border:1px solid #4a4a6a;border-radius:6px;font-size:13px;font-weight:400;color:#eee;white-space:normal;max-width:400px;word-break:break-word;z-index:400;box-shadow:0 4px 12px #0006;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;pointer-events:none}#toolbar-title:hover:after{opacity:1;visibility:visible}#toolbar-title.editing{background:#1a1a2e;border:1px solid #4a90d9;border-radius:4px;padding:2px 8px;margin:-2px -8px;outline:none;min-width:100px;max-width:400px}#toolbar-title.editing:after{display:none}#toolbar-meta{display:flex;gap:6px;align-items:center;flex-shrink:2;overflow:hidden}#toolbar-meta .meta-item{padding:2px 8px;background:#3a3a5c;border-radius:4px;font-size:11px;color:#aaa;white-space:nowrap}.toolbar-spacer{flex:1;min-width:0}.view-mode-group{display:flex;gap:0;flex-shrink:0}.view-mode-btn{padding:6px 12px;font-size:11px;font-family:inherit;background:#1a1a2e;color:#888;border:1px solid #4a4a6a;cursor:pointer;transition:all .15s}.view-mode-btn:first-child{border-radius:4px 0 0 4px}.view-mode-btn:last-child{border-radius:0 4px 4px 0}.view-mode-btn:not(:first-child){border-left:none}.view-mode-btn:hover{background:#2a2a40;color:#bbb}.view-mode-btn.active{background:#4a90d9;color:#fff;border-color:#4a90d9}.export-dropdown{position:relative;flex-shrink:0}#export-btn{padding:6px 12px;font-size:12px;font-family:inherit;background:none;color:#888;border:1px solid #4a4a6a;border-radius:4px;cursor:pointer;transition:all .15s}#export-btn:hover{background:#3a3a50;color:#bbb}#export-btn:disabled{opacity:.4;cursor:not-allowed}.export-menu{display:none;position:absolute;top:100%;right:0;margin-top:4px;background:#2a2a40;border:1px solid #4a4a6a;border-radius:4px;box-shadow:0 4px 12px #0000004d;z-index:1000;min-width:160px}.export-dropdown.open .export-menu{display:block}.export-menu button{display:block;width:100%;padding:10px 14px;text-align:left;font-size:13px;font-family:inherit;background:none;color:#ccc;border:none;cursor:pointer;transition:background .15s}.export-menu button:hover{background:#3a3a5c}.export-menu button:first-child{border-radius:4px 4px 0 0}.export-menu button:last-child{border-radius:0 0 4px 4px}#sidebar-toggle{background:none;border:none;color:#888;font-size:14px;cursor:pointer;padding:6px 10px;border-radius:4px;transition:all .15s;flex-shrink:0}#sidebar-toggle:hover{color:#fff;background:#ffffff1a}#sidebar-toggle.active{color:#4a90d9}#canvas-controls{position:absolute;bottom:20px;left:20px;display:none;gap:8px;z-index:50}#canvas-controls.visible{display:flex}#expand-toggle,#watch-toggle{padding:6px 12px;font-size:11px;font-family:inherit;background:#3a3a5ce6;color:#bbb;border:1px solid #6a6a9a;border-radius:6px;cursor:pointer;transition:all .15s}#expand-toggle:hover,#watch-toggle:hover{background:#4a4a6cf2;color:#fff}#expand-toggle.expanded{background:#4a90d9e6;color:#fff;border-color:#4a90d9}#watch-toggle.watching{background:#50c878e6;color:#fff;border-color:#50c878}#watch-toggle:disabled{opacity:.5;cursor:not-allowed}@media(max-width:800px){#toolbar-meta{display:none}}@media(max-width:600px){#toolbar-title{display:none}#toolbar .toolbar-divider:first-of-type{display:none}}#main-container{display:flex;width:100%;flex:1;min-height:0}#sidebar{width:280px;min-width:200px;max-width:400px;background:#252538;border-right:1px solid #3a3a5a;display:flex;display:none;flex-direction:column;overflow:hidden;flex-shrink:0}#sidebar.visible{display:flex}#sidebar-content{flex:1;overflow-y:auto;padding:0}#sidebar-search{padding:12px 16px;border-bottom:1px solid #4a4a6a;background:#252538;flex-shrink:0}#sidebar-search .search-input-row,#sidebar-search .search-filters{margin-bottom:8px}#sidebar-search .search-nav{margin-top:8px}.sidebar-section{border-bottom:1px solid #3a3a5a}.sidebar-section:last-child{border-bottom:none}.sidebar-section-header{padding:12px 16px;display:flex;align-items:center;gap:8px;cursor:pointer;background:#2a2a40;transition:background .15s;-webkit-user-select:none;user-select:none}.sidebar-section-header:hover{background:#32324a}.sidebar-section-header .arrow{font-size:10px;color:#666;transition:transform .2s}.sidebar-section.expanded .sidebar-section-header .arrow{transform:rotate(90deg)}.sidebar-section-header h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#999;margin:0;flex:1}.sidebar-section-content{display:none;padding:12px 16px;background:#1e1e2e}.sidebar-section.expanded .sidebar-section-content{display:block}#sidebar-resize{width:4px;cursor:ew-resize;background:transparent;flex-shrink:0;transition:background .15s}#sidebar-resize:hover,#sidebar-resize.dragging{background:#4a90d9}#content-area{flex:1;display:flex;min-width:0;position:relative}#canvas-pane{flex:1;min-width:200px;position:relative;overflow:hidden}#canvas-pane.hidden{display:none}#canvas-container{width:100%;height:100%}#split-handle{width:6px;background:#2a2a40;cursor:ew-resize;flex-shrink:0;position:relative;z-index:100;transition:background .15s;display:none}#split-handle.visible{display:block}#split-handle:hover,#split-handle.dragging{background:#4a90d9}#split-handle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:40px;background:#fff3;border-radius:1px}#conversation-pane{width:400px;min-width:250px;background:#1e1e2e;display:none;flex-direction:column;border-left:1px solid #3a3a5a}#conversation-pane.visible{display:flex}#conversation-pane.full-width{flex:1;width:auto;max-width:none;border-left:none}#conversation-header{padding:10px 16px;background:#2a2a40;border-bottom:1px solid #3a3a5a;flex-shrink:0}#conversation-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}#conversation-header h3{font-size:14px;font-weight:600;color:#ddd;margin:0}#conversation-turn-indicator{font-size:11px;color:#888}#conversation-filters{display:flex;gap:6px;flex-wrap:wrap}.conv-filter{padding:3px 8px;font-size:10px;font-family:inherit;background:#3a3a5a;border:1px solid transparent;border-radius:4px;cursor:pointer;color:#888;transition:all .15s}.conv-filter:hover{background:#4a4a6a;color:#bbb}.conv-filter.active{color:#fff}.conv-filter[data-filter=user].active{background:#4a90d9;border-color:#4a90d9}.conv-filter[data-filter=output].active{background:#50c878;border-color:#50c878}.conv-filter[data-filter=thinking].active{background:#9b59b6;border-color:#9b59b6}.conv-filter[data-filter=tools].active{background:#f39c12;border-color:#f39c12}.conv-filter[data-filter=documents].active{background:#f1c40f;border-color:#f1c40f;color:#1a1a2e}#conversation-content{flex:1;overflow-y:auto;padding:16px}.conv-turn{margin-bottom:20px;scroll-margin-top:20px}.conv-turn.focused{background:#4a90d91a;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;border-left:3px solid #4a90d9}.conv-user{background:#2a3a4a;border-radius:6px;margin-bottom:10px;border-left:3px solid #4a90d9;overflow:hidden}.conv-user-header{padding:6px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;color:#4a90d9;font-size:11px;font-weight:500;transition:background .15s}.conv-user-header:hover{background:#4a90d91a}.conv-user-header .arrow{transition:transform .2s;font-size:9px}.conv-user.expanded .conv-user-header .arrow{transform:rotate(90deg)}.conv-user-content{display:none;padding:0 10px 8px;color:#ddd;line-height:1.5;white-space:pre-wrap;word-break:break-word;position:relative}.conv-user.expanded .conv-user-content{display:block}.conv-content-wrap{position:relative}.conv-content-wrap.needs-truncation{max-height:120px;overflow:hidden}.conv-content-wrap.needs-truncation:after{content:"";position:absolute;bottom:0;left:0;right:0;height:36px;background:linear-gradient(transparent,var(--bubble-bg, #2a3a4a));pointer-events:none}.conv-expand-btn{display:none;position:absolute;bottom:6px;right:10px;background:var(--bubble-btn-bg, rgba(74, 144, 217, .2));border:1px solid var(--bubble-color, #4a90d9);color:var(--bubble-color, #4a90d9);padding:2px 8px;border-radius:4px;font-size:10px;cursor:pointer;z-index:1}.conv-content-wrap.needs-truncation .conv-expand-btn{display:block}.conv-expand-btn:hover{filter:brightness(1.2)}.markdown-content{line-height:1.5}.markdown-content p{margin:0 0 .75em}.markdown-content p:last-child{margin-bottom:0}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{margin:.5em 0 .25em;font-weight:600;line-height:1.3}.markdown-content h1{font-size:1.4em}.markdown-content h2{font-size:1.25em}.markdown-content h3{font-size:1.1em}.markdown-content h4,.markdown-content h5,.markdown-content h6{font-size:1em}.markdown-content code{background:#0000004d;padding:.15em .4em;border-radius:3px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:.9em}.markdown-content pre{background:#0000004d;padding:10px 12px;border-radius:6px;overflow-x:auto;margin:.75em 0}.markdown-content pre code{background:none;padding:0;font-size:.85em;line-height:1.4}.markdown-content ul,.markdown-content ol{margin:.5em 0;padding-left:1.5em}.markdown-content li{margin:.25em 0}.markdown-content blockquote{margin:.75em 0;padding:.5em 1em;border-left:3px solid rgba(255,255,255,.3);background:#00000026;color:#fffc}.markdown-content a{color:#4a90d9;text-decoration:none}.markdown-content a:hover{text-decoration:underline}.markdown-content hr{border:none;border-top:1px solid rgba(255,255,255,.2);margin:1em 0}.markdown-content table{border-collapse:collapse;margin:.75em 0;font-size:.9em}.markdown-content th,.markdown-content td{border:1px solid rgba(255,255,255,.2);padding:6px 10px;text-align:left}.markdown-content th{background:#0003}.markdown-content strong{font-weight:600}.markdown-content em{font-style:italic}.conv-user{--bubble-bg: #2a3a4a;--bubble-color: #4a90d9;--bubble-btn-bg: rgba(74, 144, 217, .2)}.conv-text{--bubble-bg: #2a3a3a;--bubble-color: #50c878;--bubble-btn-bg: rgba(80, 200, 120, .2)}.conv-thinking{--bubble-bg: #2a2a3a;--bubble-color: #9b59b6;--bubble-btn-bg: rgba(155, 89, 182, .2)}.conv-tool.tool-use{--bubble-bg: #2a2a3a;--bubble-color: #f39c12;--bubble-btn-bg: rgba(243, 156, 18, .2)}.conv-tool.tool-result{--bubble-bg: #2a2a3a;--bubble-color: #e74c3c;--bubble-btn-bg: rgba(231, 76, 60, .2)}.conv-tool.tool-result.success{--bubble-color: #27ae60;--bubble-btn-bg: rgba(39, 174, 96, .2)}.conv-document{--bubble-bg: #3a3a2a;--bubble-color: #f1c40f;--bubble-btn-bg: rgba(241, 196, 15, .2)}.conv-assistant{margin-left:0}.conv-thinking{background:#2a2a3a;border-radius:6px;margin-bottom:10px;border-left:3px solid #9b59b6;overflow:hidden}.conv-thinking-header{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;color:#9b59b6;font-size:12px;font-weight:500;transition:background .15s}.conv-thinking-header:hover{background:#9b59b61a}.conv-thinking-header .arrow{transition:transform .2s;font-size:10px}.conv-thinking.expanded .conv-thinking-header .arrow{transform:rotate(90deg)}.conv-thinking-content{display:none;padding:0 10px 8px;color:#aaa;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.conv-thinking.expanded .conv-thinking-content{display:block}.conv-text{background:#2a3a3a;border-radius:6px;margin-bottom:10px;border-left:3px solid #50c878;overflow:hidden}.conv-text-header{padding:6px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;color:#50c878;font-size:11px;font-weight:500;transition:background .15s}.conv-text-header:hover{background:#50c8781a}.conv-text-header .arrow{transition:transform .2s;font-size:9px}.conv-text.expanded .conv-text-header .arrow{transform:rotate(90deg)}.conv-text-content{display:none;padding:0 10px 8px;color:#ddd;line-height:1.5;white-space:pre-wrap;word-break:break-word;position:relative}.conv-text.expanded .conv-text-content{display:block}.conv-tool{background:#2a2a3a;border-radius:6px;margin-bottom:10px;overflow:hidden}.conv-tool.tool-use{border-left:3px solid #f39c12}.conv-tool.tool-result{border-left:3px solid #e74c3c}.conv-tool.tool-result.success{border-left-color:#27ae60}.conv-tool-header{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;transition:background .15s}.conv-tool.tool-use .conv-tool-header{color:#f39c12}.conv-tool.tool-result .conv-tool-header{color:#e74c3c}.conv-tool.tool-result.success .conv-tool-header{color:#27ae60}.conv-tool-header:hover{background:#ffffff0d}.conv-tool-header .arrow{transition:transform .2s;font-size:10px}.conv-tool.expanded .conv-tool-header .arrow{transform:rotate(90deg)}.conv-tool-name{font-family:SF Mono,Monaco,monospace}.conv-tool-content{display:none;padding:0 10px 8px;color:#aaa;font-size:12px;font-family:SF Mono,Monaco,monospace;line-height:1.4;white-space:pre-wrap;word-break:break-word}.conv-tool.expanded .conv-tool-content{display:block}.conv-document{background:#3a3a2a;border-radius:6px;margin-bottom:10px;border-left:3px solid #f1c40f;overflow:hidden}.conv-document-header{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;color:#f1c40f;font-size:12px;font-weight:500}.conv-document-header .arrow{font-size:10px;transition:transform .2s ease}.conv-document.expanded .conv-document-header .arrow{transform:rotate(90deg)}.conv-document-content{display:none;padding:12px;background:#0003}.conv-document.expanded .conv-document-content{display:block}#drop-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#1a1a2ef2;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;pointer-events:none;opacity:0;transition:opacity .2s ease}#drop-overlay.active{opacity:1}#drop-overlay.visible{pointer-events:auto;opacity:1}#drop-overlay.sample-dismissed{justify-content:flex-start;padding-top:80px}#drop-overlay.sample-dismissed .drop-header{margin-bottom:32px}#drop-overlay.sample-dismissed #recent-traces{flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:0;padding-bottom:16px}#drop-overlay.sample-dismissed .recent-list{flex:1;max-height:none;overflow-y:auto;min-height:0}#drop-overlay.sample-dismissed .recent-footer{margin-top:auto;flex-shrink:0;padding:12px 0}.url-load-section{margin-top:20px;width:30%;min-width:400px;padding:0 20px}.url-load-row{display:flex;gap:10px}#url-input{flex:1;padding:10px 14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#fff;font-size:14px;outline:none;transition:border-color .2s,background .2s}#url-input:focus{border-color:#4a90d999;background:#ffffff14}#url-input::placeholder{color:#666}#url-load-btn{padding:10px 20px;background:#4a90d933;border:1px solid rgba(74,144,217,.4);border-radius:6px;color:#4a90d9;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}#url-load-btn:hover{background:#4a90d94d;border-color:#4a90d999}#url-load-btn:disabled{opacity:.5;cursor:not-allowed}#url-load-btn.loading{color:#888;pointer-events:none}.url-load-hint{margin-top:8px;font-size:12px;color:#666;text-align:center}.toast-container{position:fixed;top:25%;left:50%;transform:translate(-50%);z-index:10000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{background:#2a2a2a;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:14px 20px;color:#fff;font-size:14px;box-shadow:0 4px 20px #0006;pointer-events:auto;animation:toast-in .3s ease-out;max-width:400px;display:flex;align-items:flex-start;gap:12px}.toast.toast-error{border-color:#e74c3c66;background:linear-gradient(135deg,#2a2a2a,#3a2020)}.toast.toast-success{border-color:#27ae6066;background:linear-gradient(135deg,#2a2a2a,#203a20)}.toast.toast-info{border-color:#4a90d966;background:linear-gradient(135deg,#2a2a2a,#20303a)}.toast-icon{font-size:18px;flex-shrink:0}.toast-content{flex:1}.toast-title{font-weight:600;margin-bottom:4px}.toast-message{color:#aaa;line-height:1.4}.toast-close{background:none;border:none;color:#666;font-size:18px;cursor:pointer;padding:0;margin-left:8px;line-height:1;transition:color .2s}.toast-close:hover{color:#fff}.toast.toast-out{animation:toast-out .2s ease-in forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}#recent-traces{margin-top:30px;width:100%;max-width:500px;padding:0 20px}#recent-traces.hidden{display:none}.recent-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.recent-header h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#666}.recent-clear-btn{background:#e74c3c26;border:1px solid rgba(231,76,60,.3);color:#e74c3c;font-size:12px;cursor:pointer;padding:4px 10px;border-radius:4px;transition:all .2s}.recent-clear-btn:hover{color:#fff;background:#e74c3c;border-color:#e74c3c}.recent-footer{margin-top:12px;text-align:center;color:#666;font-size:11px}.recent-list{display:flex;flex-direction:column;gap:8px;max-height:250px;overflow-y:auto}.recent-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#2a2a40;border:1px solid #3a3a5a;border-radius:8px;cursor:pointer;transition:all .15s ease}.recent-item:hover{background:#3a3a5c;border-color:#4a90d9}.recent-item-icon{font-size:24px;flex-shrink:0}.recent-item-info{flex:1;min-width:0}.recent-item-title{font-size:14px;font-weight:500;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-item-title.custom{color:#7ab8ff}.recent-item-path{font-size:11px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-family:SF Mono,Monaco,monospace}.recent-item-meta{font-size:12px;color:#888;margin-top:2px}.recent-item-delete{background:none;border:none;color:#666;font-size:16px;cursor:pointer;padding:4px 8px;border-radius:4px;opacity:0;transition:opacity .15s ease}.recent-item:hover .recent-item-delete{opacity:1}.recent-item-delete:hover{color:#e74c3c;background:#e74c3c1a}.example-traces-section{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.example-traces-header{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-bottom:10px}.example-item{background:#4a90d90d;border:1px solid rgba(74,144,217,.15)}.example-item:hover{background:#4a90d91a;border-color:#4a90d94d}.recent-item-title.example{color:#4a90d9}.drop-corner-links{position:absolute;top:16px;right:20px;display:flex;align-items:center;gap:12px;z-index:10}.lang-switcher.landing{position:relative}.lang-switcher.landing .lang-current{background:transparent;border:1px solid #444;color:#888;padding:4px 10px;font-size:12px}.lang-switcher.landing .lang-current:hover{border-color:#666;color:#fff}.lang-switcher.landing .lang-menu{right:0;left:auto}.drop-corner-links .github-link{margin-top:0;padding:4px 10px;font-size:12px}.drop-corner-links .github-link svg{width:16px;height:16px}.drop-header{text-align:center;margin-bottom:40px;max-width:650px}.drop-title{font-size:32px;font-weight:700;color:#fff;margin:0 0 16px;letter-spacing:-.5px}.drop-intro{font-size:15px;color:#888;line-height:1.6;margin:0}.github-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 12px;color:#888;text-decoration:none;font-size:13px;border:1px solid #444;border-radius:6px;transition:all .2s}.github-link:hover{color:#fff;border-color:#666;background:#ffffff0d}.github-link svg{flex-shrink:0}.sample-preview{position:relative;margin:24px auto;max-width:60%;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #0006;cursor:pointer;transition:transform .2s,box-shadow .2s}.sample-preview:hover{transform:scale(1.02);box-shadow:0 6px 28px #00000080}.sample-preview.dismissed{display:none}.sample-toggle{background:none;border:none;color:#666;cursor:pointer;padding:2px 4px;font-size:14px;vertical-align:middle;transition:color .2s}.sample-toggle:hover{color:#fff}.sample-toggle-caret{display:inline-block;transition:transform .2s}.sample-toggle.open .sample-toggle-caret{transform:rotate(90deg)}#drop-overlay.sample-dismissed.sample-shown .sample-preview{display:block}.sample-dismiss{position:absolute;top:8px;right:8px;z-index:10;width:24px;height:24px;border:none;border-radius:50%;background:#00000080;color:#999;font-size:18px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s,background .2s,color .2s}.sample-preview:hover .sample-dismiss{opacity:1}.sample-dismiss:hover{background:#000000b3;color:#fff}.sample-preview-img{display:block;width:100%;height:auto}.sample-preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0003;transition:background .2s}.sample-preview:hover .sample-preview-overlay{background:#0006}.sample-preview-btn{padding:14px 28px;font-size:18px;font-weight:600;color:#fff;background:#4a90d9d9;border-radius:8px;box-shadow:0 2px 12px #00000080;text-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s}.sample-preview:hover .sample-preview-btn{transform:scale(1.05);box-shadow:0 4px 20px #0009}.sample-preview.loading .sample-preview-btn{background:#646464e6}@media(max-width:500px){.file-select-row{flex-direction:column;gap:20px}.drop-divider-vertical{width:80px;height:1px}.sample-preview{max-width:90%}}.file-select-row{display:flex;align-items:center;justify-content:center;gap:30px;margin:30px 0}.drop-zone{text-align:center;padding:20px}.drop-icon{font-size:36px;margin-bottom:10px;opacity:.7}.drop-text{font-size:16px;color:#888}.drop-subtext{font-size:12px;color:#666;margin-top:6px}.drop-divider-vertical{width:1px;height:80px;background:#444}.file-select-zone{text-align:center;padding:20px}#file-select-btn{padding:14px 28px;font-size:16px;font-family:inherit;background:#4a90d9;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .2s ease}#file-select-btn:hover{background:#5a9fe9}#file-select-btn:active{background:#3a80c9}#file-input{display:none}#metrics-stack{display:flex;flex-direction:column;gap:6px}.metric-row{display:flex;align-items:center;gap:8px;min-width:0}.metric-label{font-size:10px;color:#bbb;white-space:nowrap;min-width:50px}.metric-total{font-size:10px;color:#888;white-space:nowrap;min-width:45px;text-align:right;font-family:SF Mono,Monaco,monospace}.metric-chart-container{flex:1;min-width:0;height:24px;background:#2a2a40;border-radius:3px;overflow-x:auto;overflow-y:hidden;cursor:pointer}.metric-chart-container:hover{background:#323248}.metric-chart-container::-webkit-scrollbar{height:4px}.metric-chart-container::-webkit-scrollbar-track{background:transparent}.metric-chart-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.metric-canvas{height:24px;display:block}#chart-tooltip{position:fixed;padding:4px 8px;background:#000000d9;color:#fff;font-size:11px;border-radius:4px;pointer-events:none;z-index:10000;white-space:nowrap;opacity:0;transition:opacity .1s}#chart-tooltip.visible{opacity:1}#chart-tooltip .tooltip-turn{color:#888;font-size:10px}#chart-tooltip .tooltip-value{font-weight:600}.metrics-range{font-size:10px;color:#666}#word-freq-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}#word-freq-source{font-size:10px;padding:2px 4px;background:#2a2a40;color:#aaa;border:1px solid #5a5a7a;border-radius:3px;cursor:pointer}#word-freq-chart{display:flex;flex-direction:column;gap:4px}.word-freq-row{display:flex;align-items:center;gap:6px;height:22px;padding:2px 4px;border-radius:3px;cursor:pointer;transition:background .15s}.word-freq-row:hover{background:#ffffff0d}.word-freq-row.active{background:#ffffff1a}.word-freq-color{width:10px;height:10px;border-radius:2px;flex-shrink:0;opacity:.6;transition:opacity .15s,transform .15s}.word-freq-row:hover .word-freq-color,.word-freq-row.active .word-freq-color{opacity:1;transform:scale(1.1)}.word-freq-label{width:55px;font-size:11px;color:#bbb;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}.word-freq-row.active .word-freq-label{color:#fff;font-weight:500}.word-freq-bar-container{flex:1;height:14px;background:#2a2a40;border-radius:3px;overflow:hidden}.word-freq-bar{height:100%;border-radius:3px;transition:width .3s ease,opacity .15s;min-width:2px;opacity:.7}.word-freq-row:hover .word-freq-bar,.word-freq-row.active .word-freq-bar{opacity:1}.word-freq-count{width:28px;font-size:10px;color:#888;text-align:left;flex-shrink:0}.word-freq-row.active .word-freq-count{color:#bbb}.search-input-row{display:flex;gap:6px;margin-bottom:10px}#search-input{flex:1;min-width:0;padding:8px 10px;font-size:13px;font-family:inherit;background:#2a2a40;color:#eee;border:1px solid #5a5a7a;border-radius:4px;outline:none}#search-input:focus{border-color:#4a90d9}#search-input::placeholder{color:#666}#search-regex-toggle{padding:6px 10px;font-size:12px;font-family:monospace;font-weight:600;background:#2a2a40;color:#888;border:1px solid #5a5a7a;border-radius:4px;cursor:pointer;transition:all .15s;flex-shrink:0}#search-regex-toggle:hover{background:#3a3a50;color:#aaa}#search-regex-toggle.active{background:#4a90d9;color:#fff;border-color:#4a90d9}#search-input.regex-error{border-color:#e74c3c}.search-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.search-filter{display:flex;align-items:center;gap:4px;font-size:10px;color:#aaa;cursor:pointer}.search-filter input{width:12px;height:12px;margin:0;cursor:pointer}.filter-color{width:8px;height:8px;border-radius:2px}.filter-color.user{background:#4a90d9}.filter-color.assistant{background:#50c878}.filter-color.thinking{background:#9b59b6}.filter-color.tool-use{background:#f39c12}.filter-color.tool-result{background:#e74c3c}#search-results-count{font-size:11px;color:#888;margin-bottom:8px}#search-results-list{max-height:200px;overflow-y:auto;margin-bottom:10px}.search-result-item{padding:8px 10px;margin-bottom:4px;background:#2a2a40;border-radius:4px;border-left:3px solid #666;cursor:pointer;transition:all .15s}.search-result-item:hover{background:#3a3a50}.search-result-item.active{background:#3a4a60;border-left-color:#fff}.search-result-item.user{border-left-color:#4a90d9}.search-result-item.assistant{border-left-color:#50c878}.search-result-item.thinking{border-left-color:#9b59b6}.search-result-item.tool_use{border-left-color:#f39c12}.search-result-item.tool_result{border-left-color:#e74c3c}.search-result-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.search-result-type{font-size:9px;font-weight:600;text-transform:uppercase;padding:1px 4px;border-radius:3px;color:#fff}.search-result-type.user{background:#4a90d9}.search-result-type.assistant{background:#50c878}.search-result-type.thinking{background:#9b59b6}.search-result-type.tool_use{background:#f39c12}.search-result-type.tool_result{background:#e74c3c}.search-result-turn{font-size:10px;color:#888}.search-result-snippet{font-size:11px;color:#bbb;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-result-snippet mark{background:#5a7a3a;color:#fff;padding:0 2px;border-radius:2px}.search-nav{display:flex;gap:6px}.search-nav button{flex:1;padding:5px 8px;font-size:11px;font-family:inherit;background:#2a2a40;color:#aaa;border:1px solid #5a5a7a;border-radius:4px;cursor:pointer;transition:all .15s}.search-nav button:hover{background:#3a3a50;color:#ddd}.search-nav button:disabled{opacity:.5;cursor:not-allowed}.detail-empty{padding:20px;text-align:center;color:#666;font-style:italic}.detail-section{margin-bottom:14px}.detail-section:last-child{margin-bottom:0}.detail-section-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}.copy-btn{background:none;border:1px solid #5a5a7a;color:#888;font-size:10px;padding:2px 6px;border-radius:3px;cursor:pointer;transition:all .15s ease}.copy-btn:hover{border-color:#7a7a9a;color:#bbb}.copy-btn.copied{border-color:#50c878;color:#50c878}.detail-section-content{color:#ddd;line-height:1.5;white-space:pre-wrap;word-break:break-word;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px}.detail-section-content.code{font-family:SF Mono,Monaco,monospace;font-size:11px;background:#2a2a40;padding:8px;border-radius:4px;max-height:200px;overflow-y:auto}.detail-type-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase}.detail-type-badge.user{background:#4a90d9;color:#fff}.detail-type-badge.assistant{background:#50c878;color:#fff}.detail-type-badge.thinking{background:#9b59b6;color:#fff}.detail-type-badge.tool_use{background:#f39c12;color:#fff}.detail-type-badge.tool_result{background:#e74c3c;color:#fff}.detail-type-badge.cluster{background:#5a9a7a;color:#fff}.detail-actions{display:flex;flex-wrap:wrap;gap:6px}.detail-action-btn{padding:4px 8px;font-size:11px;font-family:inherit;background:#3a3a5c;color:#bbb;border:1px solid #5a5a7a;border-radius:4px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.detail-action-btn:hover{background:#4a4a6c;color:#fff;border-color:#6a6a8a}.detail-action-btn.primary{background:#4a90d9;color:#fff;border-color:#4a90d9}.detail-action-btn.primary:hover{background:#5a9fe9}.cluster-list{display:flex;flex-direction:column;gap:4px}.cluster-list-item{padding:6px 8px;background:#2a2a40;border-radius:4px;font-size:11px;line-height:1.4;border-left:3px solid #666;white-space:pre-wrap;word-break:break-word}.cluster-list-item.thinking{border-left-color:#9b59b6;font-family:SF Mono,Monaco,monospace;color:#bbb}.cluster-list-item.tool_use{border-left-color:#f39c12;font-weight:500}.cluster-list-item.tool_result{border-left-color:#e74c3c;font-family:SF Mono,Monaco,monospace;color:#bbb}.cluster-list-item.tool_result.success{border-left-color:#27ae60}.raw-toggle-btn{background:none;border:1px solid #5a5a7a;color:#888;font-size:11px;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .15s ease}.raw-toggle-btn:hover{border-color:#7a7a9a;color:#bbb}.raw-data{max-height:200px;overflow-y:auto;font-size:10px;margin-top:8px}#legend{position:absolute;bottom:20px;right:20px;background:#3a3a5ce6;border:1px solid #6a6a9a;padding:0;border-radius:8px;font-size:11px;z-index:50;color:#ddd;display:none}#legend.visible{display:block}#legend-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;cursor:pointer;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#bbb;-webkit-user-select:none;user-select:none}#legend-header:hover{color:#fff}#legend-toggle{font-size:8px;transition:transform .2s}#legend.collapsed #legend-toggle{transform:rotate(-90deg)}#legend-body{padding:0 12px 10px}#legend.collapsed #legend-body{display:none}#legend h3{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#999;margin-bottom:8px}.legend-item{display:flex;align-items:center;gap:8px;margin-bottom:4px}.legend-item:last-child{margin-bottom:0}.legend-color{width:12px;height:12px;border-radius:3px;flex-shrink:0}.legend-color.user{background:#4a90d9}.legend-color.assistant{background:#50c878}.legend-color.thinking{background:#9b59b6}.legend-color.tool-use{background:#f39c12}.legend-color.tool-result{background:#e74c3c}.legend-color.tool-result-success{background:#27ae60}.legend-color.document{background:#f1c40f}.legend-section{margin-bottom:12px}.legend-section:last-child{margin-bottom:0}.legend-shortcut{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:10px;color:#bbb}.legend-shortcut kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:1px 4px;font-family:inherit;font-size:9px;color:#ddd}.legend-label{color:#bbb;font-size:11px}#stats{display:none}#coil-controls-toggle{padding:6px 12px;font-size:11px;font-family:inherit;background:#3a3a5ce6;color:#bbb;border:1px solid #6a6a9a;border-radius:6px;cursor:pointer;transition:all .15s}#coil-controls-toggle:hover{background:#4a4a6cf2;color:#fff}#coil-controls-toggle.active{background:#9b59b6e6;color:#fff;border-color:#9b59b6}#coil-controls{position:absolute;bottom:60px;left:20px;background:#2a2a40f2;border:1px solid #6a6a9a;border-radius:8px;font-size:11px;z-index:50;color:#ddd;display:none;min-width:200px;max-height:calc(100% - 100px);overflow-y:auto}#coil-controls.visible{display:block}#coil-controls-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #5a5a7a;font-weight:600;font-size:11px;color:#bbb}#coil-reset-btn{padding:3px 8px;font-size:10px;font-family:inherit;background:#3a3a5a;color:#aaa;border:1px solid #5a5a7a;border-radius:4px;cursor:pointer;transition:all .15s}#coil-reset-btn:hover{background:#4a4a6a;color:#fff}#coil-controls-body{padding:10px 12px}.coil-section{margin-bottom:12px}.coil-section:last-child{margin-bottom:0}.coil-section-title{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:8px}.coil-slider{display:flex;align-items:center;gap:8px;margin-bottom:6px}.coil-slider:last-child{margin-bottom:0}.coil-slider label{width:50px;font-size:10px;color:#bbb;flex-shrink:0}.coil-slider input[type=range]{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#4a4a6a;border-radius:2px;cursor:pointer}.coil-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:#9b59b6;border-radius:50%;cursor:pointer;transition:background .15s}.coil-slider input[type=range]::-webkit-slider-thumb:hover{background:#b86fd9}.coil-slider input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#9b59b6;border:none;border-radius:50%;cursor:pointer}.coil-value{width:32px;font-size:10px;color:#888;text-align:right;font-family:SF Mono,Monaco,monospace;flex-shrink:0}.coil-toggle-row{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #4a4a6a}.coil-toggle-row label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:11px;color:#bbb}.coil-toggle-row label:hover{color:#fff}.coil-toggle-row input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:#5a9a7a}.coil-line-options{display:none;margin-top:10px;padding-top:8px;border-top:1px dashed #3a3a5a}.coil-line-options.visible{display:block}.coil-line-option{display:flex;align-items:center;gap:8px;margin-bottom:6px}.coil-line-option:last-child{margin-bottom:0}.coil-line-option label{width:50px;font-size:10px;color:#999;flex-shrink:0}.coil-line-option input[type=color]{width:28px;height:20px;padding:0;border:1px solid #5a5a7a;border-radius:3px;background:none;cursor:pointer;flex-shrink:0}.coil-line-option .coil-value.color-code{width:58px;font-size:9px}.coil-line-option input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.coil-line-option input[type=color]::-webkit-color-swatch{border-radius:2px;border:none}.coil-line-option input[type=range]{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#4a4a6a;border-radius:2px;cursor:pointer}.coil-line-option input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:#5a9a7a;border-radius:50%;cursor:pointer}.conv-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.conv-badge{display:inline-block;padding:2px 8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;border-radius:4px;color:#fff}.conv-badge.sidechain{background:#6a5acd;border:1px solid #7b6ed8}.conv-badge.agent{background:#3a7a5a;border:1px solid #4a8a6a;font-family:SF Mono,Monaco,monospace;text-transform:none}.conv-badge.stop-reason{background:#8a6a2a;border:1px solid #9a7a3a;text-transform:none}.conv-error-banner{padding:8px 12px;margin-bottom:10px;background:#e74c3c26;border:1px solid rgba(231,76,60,.3);border-left:3px solid #e74c3c;border-radius:4px;color:#e74c3c;font-size:12px;line-height:1.4;white-space:pre-wrap;word-break:break-word}#watch-notification{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#50c878f2;color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;z-index:1000;transition:opacity .3s}.lang-switcher{position:relative;margin-left:8px}.lang-current{display:flex;align-items:center;gap:4px;padding:5px 10px;font-size:12px;font-family:inherit;background:transparent;border:1px solid #444;border-radius:4px;color:#ccc;cursor:pointer;transition:all .2s}.lang-current:hover{background:#3a3a50;border-color:#666;color:#fff}.lang-current:after{content:"▼";font-size:8px;margin-left:2px}.lang-menu{position:absolute;top:100%;right:0;margin-top:4px;background:#2a2a40;border:1px solid #444;border-radius:6px;box-shadow:0 4px 12px #0000004d;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .15s ease;z-index:1000;min-width:100px}.lang-switcher.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}.lang-menu button{display:block;width:100%;padding:8px 12px;font-size:12px;font-family:inherit;background:transparent;border:none;color:#ccc;text-align:left;cursor:pointer;transition:all .15s}.lang-menu button:first-child{border-radius:5px 5px 0 0}.lang-menu button:last-child{border-radius:0 0 5px 5px}.lang-menu button:hover{background:#3a3a50;color:#fff}.lang-menu button.active{background:#4a5568;color:#fff}