*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg0:#0c0c0c;--bg1:#141414;--bg2:#1a1a1a;--bg3:#222;--bg4:#2a2a2a;
--tx1:#e4e4e4;--tx2:#a0a0a0;--tx3:#666;--tx4:#444;
--ac:#7c7cff;--ac2:#9a9aff;--ac-bg:rgba(124,124,255,.08);
--red:#ff5555;--green:#50fa7b;--yellow:#f1fa8c;--cyan:#8be9fd;--orange:#ffb86c;--pink:#ff79c6;
--border:#222;--border2:#333;
--mono:'JetBrains Mono','Fira Code',Consolas,'Courier New',monospace;
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--sidebar:270px;--hdr:44px;--r:8px;
}
html,body{height:100%;font-family:var(--sans);background:var(--bg0);color:var(--tx1);overflow:hidden;font-size:14px;-webkit-font-smoothing:antialiased}
#app{display:flex;height:100vh}

#sidebar{width:var(--sidebar);min-width:var(--sidebar);background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:20;transition:transform .2s}
.sidebar-head{display:flex;align-items:center;gap:9px;padding:10px 12px;height:var(--hdr);border-bottom:1px solid var(--border)}
.logo{width:28px;height:28px;border-radius:7px;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-text{font-weight:700;font-size:13px;color:var(--tx1);letter-spacing:-.3px}
.sidebar-section{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 4px}
.sidebar-section-label{font-size:13px;font-weight:700;color:var(--tx1)}
.btn-new-small{display:flex;align-items:center;gap:3px;background:var(--ac-bg);border:1px solid rgba(124,124,255,.2);color:var(--ac);cursor:pointer;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:600;font-family:var(--sans);transition:background .1s,border-color .1s}
.btn-new-small:hover{background:rgba(124,124,255,.15);border-color:var(--ac)}
.resizer{width:4px;flex-shrink:0;cursor:col-resize;background:transparent;z-index:15;transition:background .15s}
.resizer:hover,.resizer.dragging{background:var(--ac)}
#resizer-workspace{display:none}
.content:has(.workspace.open) #resizer-workspace{display:block}

.project-list{flex:1;overflow-y:auto;padding:2px 4px}

.p-group{margin-bottom:2px}
.p-head{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--tx2);transition:background .1s,color .1s;position:relative}
.p-head:hover{background:var(--bg3);color:var(--tx1)}
.p-head.active{color:var(--tx1)}
.p-arrow{width:14px;height:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s;color:var(--tx4)}
.p-head.active .p-arrow{color:var(--tx2)}
.p-arrow.open{transform:rotate(90deg)}
.p-folder{color:var(--tx4);flex-shrink:0;display:flex;transition:color .15s}
.p-head.active .p-folder{color:var(--yellow)}
.p-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.p-head.active .p-name{color:var(--ac)}
.p-actions{display:flex;gap:1px;opacity:0;transition:opacity .1s}
.p-head:hover .p-actions{opacity:1}
.p-act{background:none;border:none;color:var(--tx4);cursor:pointer;padding:2px;display:flex;border-radius:3px;transition:color .1s,background .1s}
.p-act:hover{color:var(--tx1);background:var(--bg4)}
.p-act.del:hover{color:var(--red)}
.p-act.zip:hover{color:var(--ac)}

.p-sessions{display:none;padding-left:10px}
.p-sessions.open{display:block}
.p-new-chat{display:flex;align-items:center;gap:5px;padding:4px 8px 4px 28px;border-radius:4px;cursor:pointer;font-size:11px;color:var(--tx4);transition:color .1s,background .1s}
.p-new-chat:hover{color:var(--ac);background:var(--ac-bg)}
.s-item{display:flex;align-items:center;gap:6px;padding:5px 8px 5px 28px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--tx2);transition:background .1s,color .1s;position:relative}
.s-item:hover{background:var(--bg3);color:var(--tx1)}
.s-item.active{background:var(--bg3);color:var(--tx1)}
.s-item.active::before{content:'';position:absolute;left:10px;top:5px;bottom:5px;width:2px;background:var(--ac);border-radius:1px}
.s-icon{flex-shrink:0;opacity:.35;display:flex}.s-item.active .s-icon{opacity:.6}
.s-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-del{opacity:0;background:none;border:none;color:var(--red);cursor:pointer;padding:2px;font-size:14px;line-height:1;display:flex;transition:opacity .1s}
.s-item:hover .s-del{opacity:.5}.s-del:hover{opacity:1!important}

.sidebar-bottom{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--border)}
.user-info{font-size:12px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.btn-ghost{background:none;border:none;color:var(--tx3);cursor:pointer;padding:5px;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:color .1s,background .1s}
.btn-ghost:hover{color:var(--tx1);background:var(--bg3)}
/* 🆕 打包下载按钮：使用青绿色更舒适 */
#btn-download-project{color:var(--cyan)}
#btn-download-project:hover{color:#fff;background:rgba(139,233,253,.2);box-shadow:0 0 0 1px rgba(139,233,253,.3)}
.btn-sm{width:30px;height:30px;padding:0}
.btn-xs{width:24px;height:24px;padding:0}
.btn-primary{width:100%;padding:8px 14px;background:var(--ac);border:none;border-radius:var(--r);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:background .12s}
.btn-primary:hover{background:var(--ac2)}
.btn-cancel{padding:8px 14px;background:var(--bg3);border:none;border-radius:var(--r);color:var(--tx2);font-size:13px;cursor:pointer;font-family:var(--sans)}
.btn-cancel:hover{background:var(--bg4);color:var(--tx1)}

#main{flex:1;display:flex;flex-direction:column;min-width:0}
#header{height:var(--hdr);display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--border);background:var(--bg1);gap:6px;flex-shrink:0}
#header-title{flex:1;font-size:12px;font-weight:600;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-right{display:flex;gap:2px}
#btn-workspace.active{color:var(--ac);background:var(--ac-bg)}

.content{flex:1;display:flex;overflow:hidden;position:relative}
.chat-panel{flex:1;display:flex;flex-direction:column;min-width:0}
.workspace{width:0;overflow:hidden;border-left:1px solid var(--border);background:var(--bg1);flex-shrink:0;transition:width .2s}
.workspace.open{width:var(--ws-width,50%)}
.ws-split{display:flex;height:100%;min-width:0}
.ws-preview{flex:1;display:flex;flex-direction:column;min-width:0}
.ws-preview-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border);height:var(--hdr)}
.preview-name{font-size:12px;color:var(--ac);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--tx4);gap:10px}
.preview-empty p{font-size:12px}
.preview-code{flex:1;overflow:auto;margin:0;padding:0;font-family:var(--mono);font-size:12px;line-height:1.7;background:var(--bg0);border:none}
.preview-code.hidden{display:none}
.preview-code code{font-family:var(--mono)!important;font-size:12px!important;line-height:1.7!important;background:transparent!important;padding:0!important}
.preview-code .hljs{background:transparent!important;padding:12px!important}

.code-table{border-collapse:collapse;width:100%}
.code-table td{padding:0;vertical-align:top}
.code-table .ln{width:45px;min-width:45px;padding:0 8px 0 12px;text-align:right;color:var(--tx4);font-size:11px;line-height:1.7;user-select:none;border-right:1px solid var(--border);font-family:var(--mono)}
.code-table .lc{padding:0 12px;white-space:pre;font-family:var(--mono);font-size:12px;line-height:1.7}

.ws-tree{width:210px;min-width:210px;display:flex;flex-direction:column;border-left:1px solid var(--border)}
.ws-tree-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border);height:var(--hdr)}
.ws-tree-actions{display:flex;align-items:center;gap:2px}
.ws-title{font-size:12px;font-weight:600;color:var(--tx2);display:flex;align-items:center;gap:5px}
.breadcrumb{padding:5px 8px;font-size:11px;color:var(--tx4);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:1px;align-items:center}
.breadcrumb span{cursor:pointer;padding:1px 3px;border-radius:3px;transition:background .1s}
.breadcrumb span:hover{background:var(--bg3);color:var(--tx2)}
.breadcrumb .bc-s{cursor:default;padding:0}.breadcrumb .bc-s:hover{background:none}
.file-list{flex:1;overflow-y:auto;padding:3px}
.f-item{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--tx2);transition:background .1s}
.f-item:hover{background:var(--bg3);color:var(--tx1)}
.f-item.active{background:var(--ac-bg);color:var(--ac)}
.f-arrow{width:14px;height:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--tx4);font-size:9px;transition:opacity .15s;cursor:pointer}
.f-arrow-spacer{width:14px;flex-shrink:0}
.f-empty{padding:3px 8px;font-size:11px;color:var(--tx4);font-style:italic}
.f-icon{flex-shrink:0;display:flex}
.f-icon.dir{color:var(--yellow)}.f-icon.file{color:var(--tx4)}
.f-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.welcome{flex:1;display:flex;align-items:center;justify-content:center}
.welcome-inner{text-align:center}
.welcome-icon{width:64px;height:64px;border-radius:16px;background:var(--ac-bg);color:var(--ac);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 8px 24px rgba(124,124,255,.1)}
.welcome h2{font-size:26px;font-weight:700;color:var(--tx1);margin-bottom:6px;letter-spacing:-.5px}
.welcome p{color:var(--tx3);font-size:13px;margin-bottom:20px;line-height:1.5}
.welcome .btn-primary{width:auto;padding:9px 28px;display:inline-flex;font-size:13px}

.chat{flex:1;overflow-y:auto;padding:18px 0;scroll-behavior:smooth}
.chat.hidden{display:none}
.messages{max-width:780px;margin:0 auto;padding:0 16px}
.msg{display:flex;gap:12px;margin-bottom:20px;animation:msg-in .25s cubic-bezier(.16,1,.3,1)}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-av{width:32px;height:32px;min-width:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;transition:transform .15s}
.msg.ai .msg-av{background:linear-gradient(135deg,#1a4a2a,var(--green));color:#000;box-shadow:0 2px 8px rgba(80,250,123,.12)}
.msg.user .msg-av{background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;box-shadow:0 2px 8px rgba(124,124,255,.18)}
.msg-body{flex:1;min-width:0}
.msg-role{font-size:11px;font-weight:600;color:var(--tx3);margin-bottom:4px;letter-spacing:.3px;display:flex;align-items:center;gap:5px}
.msg.user .msg-role{color:var(--ac);justify-content:flex-end}
.msg.ai .msg-role{color:var(--green)}

.msg.user{flex-direction:row-reverse}
.msg.user .msg-body{display:flex;flex-direction:column}
.msg.user .msg-parts{display:flex;flex-direction:column;align-items:flex-end}
.msg.user .msg-text{
    background:linear-gradient(135deg,#6a6aff,#5555ee);
    color:#fff;
    border-radius:18px 18px 4px 18px;
    padding:10px 16px;
    max-width:85%;
    word-break:break-word;
    line-height:1.6;
    box-shadow:0 2px 12px rgba(124,124,255,.12);
    transition:box-shadow .2s;
}
.msg.user .msg-text:hover{box-shadow:0 4px 16px rgba(124,124,255,.2)}
.msg.user .msg-text p{margin-bottom:0}
.msg.user .msg-role{color:var(--ac);text-align:right}
.msg.user .msg-av{background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;box-shadow:0 2px 8px rgba(124,124,255,.18)}

/* 🆕 AI 消息文字：卡片式设计 + 统一宽度 */
.msg.ai .msg-text{
    background:linear-gradient(135deg,rgba(80,250,123,.04),rgba(124,124,255,.03));
    border-radius:4px 14px 14px 14px;
    padding:12px 18px;
    max-width:none;
    width:100%;
    display:block;
    line-height:1.65;
    border:1px solid rgba(80,250,123,.1);
    border-left:3px solid rgba(80,250,123,.3);
    box-shadow:0 1px 6px rgba(0,0,0,.2);
    transition:border-color .2s;
    margin-bottom:10px;
}
.msg.ai .msg-text:hover{border-left-color:rgba(80,250,123,.5)}
.msg-text p{margin-bottom:3px}.msg-text p:last-child{margin-bottom:0}
.msg-text pre{background:var(--bg1);border:1px solid var(--border);border-radius:8px;padding:12px 14px;overflow-x:auto;margin:8px 0;font-family:var(--mono);font-size:12px;line-height:1.55;position:relative}
.msg-text pre::after{content:attr(data-lang);position:absolute;top:6px;right:10px;font-size:9px;color:var(--tx4);text-transform:uppercase;font-family:var(--mono);letter-spacing:.5px}
.msg-text code{background:var(--bg3);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:12px;color:var(--tx1)}
.msg-text pre code{background:none;padding:0;color:var(--tx1)}
.msg.user .msg-text code{background:rgba(255,255,255,.12);color:#fff}
.msg-text strong{color:#fff;font-weight:700}
.msg-text h2,.msg-text h3{margin:12px 0 5px;font-size:15px;color:var(--tx1);font-weight:700}
.msg-text ul,.msg-text ol{padding-left:18px;margin:6px 0}
.msg-text li{margin-bottom:3px;color:var(--tx2)}
.msg-text blockquote{border-left:2px solid var(--ac);padding-left:10px;color:var(--tx2);margin:6px 0;font-style:italic}
.msg-text a{color:var(--ac);text-decoration:none;border-bottom:1px solid rgba(124,124,255,.2);transition:border-color .15s}
.msg-text a:hover{border-bottom-color:var(--ac)}
.msg-text table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px;overflow:hidden;border-radius:8px;border:1px solid var(--border)}
.msg-text th{background:var(--bg3);padding:7px 12px;text-align:left;border:1px solid var(--border);font-weight:600;color:var(--tx2);white-space:nowrap}
.msg-text td{padding:7px 12px;border:1px solid var(--border);color:var(--tx3)}
.msg-text tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.msg-text td code{font-size:11px}

.opt-card{margin-top:10px;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;overflow:hidden;max-width:92%;animation:opt-in .25s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 14px rgba(0,0,0,.2)}
@keyframes opt-in{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.opt-card-head{padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--tx2);display:flex;align-items:center;gap:7px;background:rgba(124,124,255,.03)}
.opt-card-head svg{flex-shrink:0;color:var(--ac)}
.opt-list{padding:4px 0}
.opt-item{display:flex;align-items:center;gap:9px;padding:9px 14px;cursor:pointer;transition:all .15s;font-size:13px;color:var(--tx2);user-select:none;border-left:3px solid transparent}
.opt-item:hover,.opt-item.hover{background:var(--bg3);border-left-color:var(--ac);transform:translateX(0)}
.opt-item.selected{background:var(--ac-bg);color:var(--ac);font-weight:500;border-left-color:var(--ac)}
.opt-item.selected:hover{background:var(--ac-bg)}
.opt-item:focus{outline:none}
.opt-item:focus-visible{box-shadow:inset 0 0 0 2px var(--ac)}
.opt-idx{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:var(--bg1);border:1px solid var(--border2);border-radius:4px;font-size:10px;font-family:var(--mono);color:var(--tx3);font-weight:600;flex-shrink:0}
.opt-item.selected .opt-idx{background:var(--ac);color:#fff;border-color:var(--ac)}
.opt-radio{width:14px;height:14px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .12s}
.opt-item.selected .opt-radio{border-color:var(--ac)}
.opt-item.selected .opt-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac)}
.opt-label{flex:1;word-break:break-word}
.opt-rec{font-size:10px;padding:1px 5px;background:var(--ac-bg);color:var(--ac);border-radius:3px;margin-left:auto;flex-shrink:0;font-weight:500}
.opt-item.selected .opt-rec{background:var(--ac);color:#fff}
.opt-other{display:flex;gap:8px;padding:6px 12px 8px;align-items:center}
.opt-other .opt-radio{transition:all .12s}
.opt-other .opt-radio.active{border-color:var(--ac)}
.opt-other .opt-radio.active::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac)}
.opt-other-input{flex:1;padding:7px 10px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--tx1);font-size:12px;outline:none;font-family:var(--sans);transition:border-color .12s}
.opt-other-input:focus{border-color:var(--ac);box-shadow:0 0 0 2px rgba(124,124,255,.15)}
.opt-other-input::placeholder{color:var(--tx4)}
.opt-confirm{padding:0 12px 10px;display:flex;justify-content:flex-end;align-items:center;gap:6px}
.opt-confirm-btn{padding:7px 18px;background:var(--ac);border:none;border-radius:6px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);opacity:.4;pointer-events:none;transition:all .12s;display:inline-flex;align-items:center;gap:6px}
.opt-confirm-btn.active{opacity:1;pointer-events:auto}
.opt-confirm-btn.active:hover{background:var(--ac2);transform:translateY(-1px);box-shadow:0 2px 8px rgba(124,124,255,.3)}
.opt-confirm-kbd{display:inline-flex;align-items:center;padding:1px 5px;background:rgba(255,255,255,.2);border-radius:3px;font-size:9px;font-family:var(--mono);font-weight:500}

/* 🆕 选项卡片折叠态（用户选择后） */
.opt-collapsed{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 14px;background:var(--ac-bg);border:1px solid rgba(124,124,255,.15);border-radius:10px;font-size:12px;color:var(--tx2);max-width:92%;animation:fi .2s ease}
.opt-collapsed-icon{width:18px;height:18px;border-radius:50%;background:var(--green);color:#000;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.opt-collapsed-text strong{color:var(--ac);font-weight:600}

.ai-steps{margin-bottom:10px;display:flex;flex-direction:column;gap:4px;width:100%}
.ai-steps-collapsible{max-height:240px;overflow-y:auto;scroll-behavior:smooth}
.ai-steps-collapsible::-webkit-scrollbar{width:4px}
.ai-steps-collapsible::-webkit-scrollbar-track{background:transparent}
.ai-steps-collapsible::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.ai-step{font-size:11px;color:var(--tx3);padding:5px 10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:var(--bg1);border-radius:7px;border:1px solid var(--border);transition:all .25s}
.ai-step .step-icon{font-size:13px;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.ai-step .step-label{font-weight:600;font-size:11px;color:var(--tx2)}
.ai-step .step-detail{font-family:var(--mono);font-size:10px;color:var(--tx4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.ai-step .step-file{font-family:var(--mono);font-size:10px;color:var(--cyan);background:rgba(139,233,253,.06);padding:2px 6px;border-radius:4px;border:1px solid rgba(139,233,253,.12)}
.ai-step .step-cmd{font-family:var(--mono);font-size:10px;color:var(--yellow);background:rgba(241,250,140,.06);padding:2px 6px;border-radius:4px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;border:1px solid rgba(241,250,140,.12)}
.ai-step .step-spin{width:12px;height:12px;min-width:12px;border:1.5px solid var(--orange);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.ai-step.is-running{border-color:rgba(255,184,108,.35);background:linear-gradient(105deg,rgba(255,184,108,.04),var(--bg1) 60%);box-shadow:0 0 0 1px rgba(255,184,108,.06) inset}
.ai-step.is-running .step-label{color:var(--orange)}
.ai-step.is-running .step-file{background:rgba(255,184,108,.1);color:var(--orange);border-color:rgba(255,184,108,.2)}
.ai-step.is-completed{border-color:rgba(80,250,123,.15);opacity:.82}
.ai-step.is-completed .step-label{color:var(--green)}
.ai-step.is-completed .step-icon{color:var(--green)}
.ai-step.is-completed .step-file{color:var(--green);background:rgba(80,250,123,.06);border-color:rgba(80,250,123,.12)}
.ai-step.is-error{border-color:rgba(255,85,85,.15);box-shadow:0 0 0 1px rgba(255,85,85,.04) inset}
.ai-step.is-error .step-label{color:var(--red)}
.ai-step.is-error .step-icon{color:var(--red)}
.ai-step.is-question{border-color:rgba(124,124,255,.2);background:var(--ac-bg)}
.ai-step.is-question .step-label{color:var(--ac)}
.stream-steps{margin-bottom:10px;margin-top:4px;max-height:240px;overflow-y:auto;scroll-behavior:smooth;width:100%}
.stream-steps .ai-step{animation:fi .2s ease}
/* 滚动条样式 */
.stream-steps::-webkit-scrollbar{width:5px}
.stream-steps::-webkit-scrollbar-track{background:transparent}
.stream-steps::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.stream-steps::-webkit-scrollbar-thumb:hover{background:var(--tx4)}

/* 流式输出顶部的进度总览 */
.stream-overview {
    margin-bottom: 10px;
    margin-top: 4px;
    padding: 10px 14px;
    background: linear-gradient(105deg, rgba(255,184,108,.06), rgba(124,124,255,.04));
    border: 1px solid rgba(255,184,108,.18);
    border-radius: 10px;
    animation: fi .25s ease;
    position: relative;
    width: 100%;
}

/* 🆕 工作中：边框光弧旋转动画（comet trail 效果） */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.stream-overview.working {
    border-color: rgba(255,184,108,.1);
    box-shadow: 0 0 14px rgba(255,184,108,.06);
}
.stream-overview.working::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--border-angle),
        transparent 0%,
        transparent 50%,
        rgba(255,184,108,.3) 65%,
        rgba(255,184,108,.95) 80%,
        rgba(124,124,255,.8) 88%,
        rgba(124,124,255,.25) 94%,
        transparent 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: border-rotate 2.5s linear infinite;
    pointer-events: none;
}
@keyframes border-rotate {
    to { --border-angle: 360deg; }
}
.so-action {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tx1);
    margin-bottom: 10px;
}
.so-action:last-child { margin-bottom: 0; }
.so-action .so-action-text { color: var(--tx1); }
.so-action .so-action-text code {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--orange);
    background: rgba(255,184,108,.1);
    padding: 1px 6px;
    border-radius: 3px;
    margin: 0 2px;
}
/* 🆕 用时统计 */
.so-duration {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--tx3);
    font-family: var(--mono);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg1);
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.so-spin {
    width: 12px;
    height: 12px;
    min-width: 12px;
    border: 1.5px solid var(--orange);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.so-done {
    width: 14px;
    height: 14px;
    min-width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    font-size: 14px;
    font-weight: 700;
}
.so-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10px;
    color: var(--tx3);
    font-family: var(--mono);
}
.so-stat {
    padding: 1px 6px;
    background: var(--bg1);
    border: 1px solid var(--border);
    border-radius: 3px;
}
.so-stat-write {
    color: var(--green);
    border-color: rgba(80,250,123,.3);
    background: rgba(80,250,123,.05);
}
.so-stat-read {
    color: var(--cyan);
    border-color: rgba(139,233,253,.3);
    background: rgba(139,233,253,.05);
}

/* 🆕 工具调用分类 pill（替换旧 .so-stats，更细粒度） */
.so-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0;
    margin-bottom: 10px;
}
.so-tool {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-family: var(--mono);
    color: var(--tx3);
    background: var(--bg1);
    border: 1px solid var(--border);
    border-radius: 10px;
    line-height: 1.5;
    transition: transform .12s;
}
.so-tool b {
    font-weight: 700;
    margin-left: 2px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 10px;
    color: #fff;
}
.so-tool-read { color: var(--cyan); border-color: rgba(139,233,253,.3); background: rgba(139,233,253,.06); }
.so-tool-read b { background: var(--cyan); color: #000; }
.so-tool-glob { color: var(--yellow); border-color: rgba(241,250,140,.3); background: rgba(241,250,140,.06); }
.so-tool-glob b { background: var(--yellow); color: #000; }
.so-tool-grep { color: var(--orange); border-color: rgba(255,184,108,.3); background: rgba(255,184,108,.06); }
.so-tool-grep b { background: var(--orange); color: #000; }
.so-tool-write { color: var(--green); border-color: rgba(80,250,123,.3); background: rgba(80,250,123,.06); }
.so-tool-write b { background: var(--green); color: #000; }
.so-tool-task { color: var(--ac); border-color: rgba(124,124,255,.3); background: rgba(124,124,255,.08); }
.so-tool-task b { background: var(--ac); color: #fff; }
.so-tool-skill { color: var(--pink); border-color: rgba(255,121,198,.3); background: rgba(255,121,198,.06); }
.so-tool-skill b { background: var(--pink); color: #000; }
.so-tool-bash { color: var(--yellow); border-color: rgba(241,250,140,.3); background: rgba(241,250,140,.06); }
.so-tool-bash b { background: var(--yellow); color: #000; }
.so-tool-await { color: var(--tx3); border-color: var(--border); background: var(--bg1); }
.so-tool-await b { background: var(--tx4); color: #fff; }
.so-tool-other { color: var(--tx3); border-color: var(--border); background: var(--bg1); }
.so-tool-other b { background: var(--tx4); color: #fff; }

/* 🆕 Step 进度 pill（蓝色系，始终显示） */
.so-tool-step { color: var(--cyan); border-color: rgba(139,233,253,.35); background: rgba(139,233,253,.08); font-weight: 500; }
.so-tool-step b { background: var(--cyan); color: #000; }

/* 🆕 交付进度 pill（绿色系） */
.so-tool-delivery { color: var(--green); border-color: rgba(80,250,123,.35); background: rgba(80,250,123,.08); font-weight: 500; }

/* 🆕 Agent 调用次数 pill（紫色高亮） */
.so-tool-llm { color: var(--ac); border-color: rgba(124,124,255,.35); background: rgba(124,124,255,.1); font-weight: 500; }
.so-tool-llm b { background: var(--ac); color: #fff; }

/* 🆕 提示词动态注入 pill（橙红色，表示系统干预） */
.so-tool-inject { color: var(--orange); border-color: rgba(255,184,108,.35); background: rgba(255,184,108,.1); font-weight: 500; }
.so-tool-inject b { background: var(--orange); color: #000; }

/* 🆕 token 累计统计行 */
.so-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-family: var(--mono);
    font-size: 10.5px;
}
.so-token { display: inline-flex; align-items: center; gap: 2px; }
.so-token-in { color: var(--cyan); }
.so-token-out { color: var(--green); }
.so-token-cost { color: var(--orange); }

.msg-meta{font-size:10px;color:var(--tx4);margin-top:6px;padding-top:6px;display:flex;gap:10px;font-family:var(--mono);border-top:1px dashed rgba(255,255,255,.06)}
.msg-meta span{display:flex;align-items:center;gap:2px}

.q-card{margin-top:10px;background:var(--bg2);border:1px solid rgba(124,124,255,.25);border-radius:12px;overflow:hidden;max-width:92%;animation:fi .2s ease;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.q-card-head{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;color:var(--tx1);font-weight:600;display:flex;align-items:center;gap:6px;justify-content:space-between}
.q-card-head .q-title{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.q-card-head .q-icon{color:var(--ac);flex-shrink:0}
.q-step{font-size:11px;color:var(--tx3);font-weight:500;flex-shrink:0;background:var(--bg3);padding:2px 8px;border-radius:10px;font-family:var(--mono)}
.q-list{padding:4px 0}
.q-item{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;cursor:pointer;transition:background .1s}
.q-item:hover{background:var(--bg3)}
.q-item.selected{background:var(--ac-bg)}
.q-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:border-color .12s}
.q-item.selected .q-radio{border-color:var(--ac)}
.q-item.selected .q-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--ac)}
.q-item-body{flex:1;min-width:0}
.q-item-label{font-size:13px;color:var(--tx1);font-weight:500}
.q-item.selected .q-item-label{color:var(--ac)}
.q-item-desc{font-size:11px;color:var(--tx3);margin-top:2px}
.q-other{display:flex;gap:6px;padding:8px 14px 10px;align-items:center}
.q-other-input{flex:1;padding:7px 10px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--tx1);font-size:12px;outline:none;font-family:var(--sans)}
.q-other-input:focus{border-color:var(--ac)}
.q-other-input::placeholder{color:var(--tx4)}
.q-confirm{padding:6px 14px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.q-dots{display:flex;justify-content:center;gap:6px;padding:8px 0 2px}
.q-dots.hidden{display:none}
.q-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);transition:background .15s,transform .15s}
.q-dot.active{background:var(--ac);transform:scale(1.4)}
.q-dot.done{background:var(--ac-bg)}
.q-btn{padding:7px 18px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:opacity .12s,background .12s}
.q-btn-back{background:transparent;color:var(--tx2);border:1px solid var(--border2)}
.q-btn-back:hover{background:var(--bg3);color:var(--tx1)}
.q-confirm-btn{margin-left:auto;padding:7px 24px;background:var(--ac);border:none;border-radius:6px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);opacity:.4;pointer-events:none;transition:opacity .12s,background .12s}
.q-confirm-btn.active{opacity:1;pointer-events:auto}
.q-confirm-btn.active:hover{background:var(--ac2)}

.typing{display:flex;align-items:center;gap:5px;padding:6px 16px;max-width:760px;margin:0 auto}
.typing.hidden{display:none}
.typing .dot{width:5px;height:5px;background:var(--ac);border-radius:50%;animation:p 1.2s infinite ease-in-out}
.typing .dot:nth-child(2){animation-delay:.15s}
.typing .dot:nth-child(3){animation-delay:.3s}
@keyframes p{0%,80%,100%{transform:scale(.5);opacity:.3}40%{transform:scale(1);opacity:1}}
.typing-label{font-size:11px;color:var(--tx4)}

.input-bar{padding:6px 16px 12px;background:var(--bg1);border-top:1px solid var(--border)}
.input-bar.hidden{display:none}
.input-top{max-width:760px;margin:0 auto 4px;display:flex;align-items:center}
.model-select{padding:5px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--tx2);font-size:11px;font-family:var(--sans);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;transition:all .15s}
.model-select:hover{border-color:var(--ac);color:var(--tx1)}
.model-select:focus{border-color:var(--ac)}
.model-select option{background:var(--bg2);color:var(--tx1)}
.input-box{max-width:780px;margin:0 auto;display:flex;align-items:flex-end;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:6px 8px;transition:all .2s}
.input-box:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px rgba(124,124,255,.06)}
#msg-input{flex:1;background:none;border:none;color:var(--tx1);font-size:13px;line-height:1.5;resize:none;outline:none;max-height:140px;font-family:var(--sans);min-height:38px}
#msg-input::placeholder{color:var(--tx4)}
.btn-send{width:32px;height:32px;min-width:32px;border-radius:8px;border:none;background:var(--ac);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
.btn-send:hover:not(:disabled){background:var(--ac2);box-shadow:0 2px 8px rgba(124,124,255,.3);transform:translateY(-1px)}
.btn-send:disabled{opacity:.15;cursor:default}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100}
.modal.hidden{display:none}
.modal-card{background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:28px;width:340px;max-width:90vw}
.modal-logo{width:48px;height:48px;border-radius:12px;background:var(--ac-bg);color:var(--ac);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.modal-title{text-align:center;font-size:18px;font-weight:700;color:var(--tx1);margin-bottom:16px;letter-spacing:-.3px}
.modal-btns{display:flex;gap:8px;margin-top:14px}
.modal-btns .btn-primary,.modal-btns .btn-cancel{flex:1}
.tabs{display:flex;background:var(--bg0);border-radius:6px;padding:3px;margin-bottom:14px}
.tab{flex:1;padding:6px;background:none;border:none;color:var(--tx3);cursor:pointer;font-size:12px;font-weight:600;border-radius:4px;font-family:var(--sans);transition:all .1s}
.tab.active{background:var(--bg3);color:var(--tx1)}
.field{margin-bottom:10px}
.field label{display:block;font-size:11px;color:var(--tx3);margin-bottom:3px;font-weight:500}
.field input{width:100%;padding:8px 10px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--tx1);font-size:13px;outline:none;font-family:var(--sans);transition:border-color .1s}
.field input:focus{border-color:var(--ac)}
.err{color:var(--red);font-size:12px;margin-top:8px;text-align:center;background:rgba(255,85,85,.06);padding:5px;border-radius:5px}

.toast{position:fixed;bottom:-40px;left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--border2);color:var(--tx1);padding:8px 20px;border-radius:8px;font-size:12px;z-index:200;transition:bottom .2s;pointer-events:none}
.toast.show{bottom:20px}

.hidden{display:none!important}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--tx4)}

.btn-abort{width:32px;height:32px;min-width:32px;border-radius:8px;border:none;background:var(--red);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.btn-abort:hover{opacity:.9;box-shadow:0 2px 8px rgba(255,85,85,.3);transform:translateY(-1px)}
.btn-abort.hidden{display:none}

.btn-scroll-bottom{position:absolute;bottom:14px;right:24px;width:34px;height:34px;min-width:34px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);color:var(--tx2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:5;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.btn-scroll-bottom:hover{background:var(--ac);color:#fff;border-color:var(--ac);box-shadow:0 2px 14px rgba(124,124,255,.3);transform:translateY(-1px)}
.btn-scroll-bottom.hidden{display:none}

.streaming-text{position:relative;margin-bottom:6px}
.streaming-text::after{content:'';display:inline-block;width:6px;height:14px;background:var(--ac);margin-left:3px;animation:blink-cursor .8s infinite;vertical-align:text-bottom;border-radius:1px}
@keyframes blink-cursor{0%,50%{opacity:1}51%,100%{opacity:.15}}

.diff-bar{background:var(--bg1);border-top:1px solid var(--border);flex-shrink:0;max-height:300px;overflow:hidden;display:flex;flex-direction:column}
.diff-bar.hidden{display:none}
.diff-bar-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;cursor:pointer;font-size:12px;color:var(--tx2);user-select:none;max-width:780px;margin:0 auto;width:100%;border-radius:8px 8px 0 0;transition:all .15s}
.diff-bar-header:hover{color:var(--tx1);background:rgba(255,255,255,.02)}
.diff-bar-toggle{color:var(--tx4);font-size:14px}
.diff-bar-content{overflow-y:auto;padding:0 16px 8px;max-width:760px;margin:0 auto;width:100%}
.diff-bar-content.hidden{display:none}
.diff-file{margin-bottom:10px;border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.diff-file-head{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:var(--bg2);border-bottom:1px solid var(--border);font-size:11px}
.diff-file-path{font-family:var(--mono);font-size:11px;color:var(--cyan)}
.diff-file-stats{font-family:var(--mono);font-size:10px}
.diff-file-content{overflow-x:auto;max-height:200px;overflow-y:auto}
.diff-table{font-size:11px;line-height:1.6}
.diff-line-add{background:rgba(80,250,123,.06)}
.diff-line-del{background:rgba(255,85,85,.06)}
.diff-line-add .lc{color:var(--green)}
.diff-line-del .lc{color:var(--red)}

.todo-dock{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;margin:4px 16px;overflow:hidden;flex-shrink:0;max-width:760px;margin-left:auto;margin-right:auto}
.todo-dock.hidden{display:none}
.todo-header{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}
.todo-title{font-size:12px;font-weight:600;color:var(--tx2);display:flex;align-items:center;gap:5px;flex-shrink:0}
.todo-count{font-size:11px;color:var(--tx4);margin-left:auto}
.todo-progress-bar{flex:1;max-width:120px;height:4px;background:var(--bg0);border-radius:2px;overflow:hidden}
.todo-progress-fill{height:100%;background:var(--ac);border-radius:2px;transition:width .3s}
.todo-current{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--ac-bg);font-size:12px;color:var(--ac)}
.todo-spin{width:12px;height:12px;min-width:12px;border:2px solid var(--ac);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.todo-list{padding:4px 0;max-height:200px;overflow-y:auto}
.todo-item{display:flex;align-items:center;gap:6px;padding:3px 12px;font-size:12px;color:var(--tx3)}
.todo-icon{font-size:13px;flex-shrink:0;width:16px;text-align:center}
.todo-pending .todo-icon{color:var(--tx4)}
.todo-in_progress .todo-icon{color:var(--orange)}
.todo-completed{color:var(--tx4)}
.todo-completed .todo-text{text-decoration:line-through;opacity:.6}
.todo-completed .todo-icon{color:var(--green)}
.todo-cancelled .todo-icon{color:var(--red)}
.todo-pri-high{color:var(--red);font-size:9px}
.todo-pri-low{color:var(--tx4);font-size:9px}

.mcp-panel{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;margin:4px 16px;overflow:hidden;flex-shrink:0;max-width:780px;margin-left:auto;margin-right:auto;max-height:300px;overflow-y:auto;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.mcp-panel.hidden{display:none}
.mcp-disabled,.mcp-empty{padding:12px;text-align:center;font-size:12px;color:var(--tx4)}
.mcp-server{padding:8px 12px;border-bottom:1px solid var(--border)}
.mcp-server:last-child{border-bottom:none}
.mcp-server-row{display:flex;align-items:center;gap:8px}
.mcp-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mcp-dot-connected{background:var(--green)}
.mcp-dot-disconnected{background:var(--tx4)}
.mcp-dot-failed{background:var(--red)}
.mcp-dot-needs_auth{background:var(--yellow)}
.mcp-name{font-size:12px;color:var(--tx1);font-weight:600}
.mcp-status-text{font-size:10px;color:var(--tx4);margin-left:auto;text-transform:uppercase}
.mcp-toggle{position:relative;width:32px;height:18px;display:inline-block;flex-shrink:0}
.mcp-toggle input{opacity:0;width:0;height:0}
.mcp-slider{position:absolute;cursor:pointer;inset:0;background:var(--bg4);border-radius:9px;transition:.2s}
.mcp-slider:before{content:'';position:absolute;height:14px;width:14px;left:2px;bottom:2px;background:var(--tx2);border-radius:50%;transition:.2s}
.mcp-toggle input:checked+.mcp-slider{background:var(--ac)}
.mcp-toggle input:checked+.mcp-slider:before{transform:translateX(14px);background:#fff}
.mcp-error{font-size:11px;color:var(--red);padding:4px 0 0 20px}
.mcp-tools{font-size:10px;color:var(--tx4);padding:2px 0 0 20px}

.followup-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--ac-bg);border-top:1px solid rgba(124,124,255,.2);font-size:11px;color:var(--ac);max-width:780px;margin:0 auto;border-radius:8px;font-weight:500}
.followup-indicator.hidden{display:none}
.followup-cancel{background:none;border:none;color:var(--ac);cursor:pointer;font-size:18px;padding:0 4px;opacity:.5;transition:opacity .15s;border-radius:4px}
.followup-cancel:hover{opacity:1;background:rgba(124,124,255,.1)}
.followup-cancel:hover{opacity:1}

@media(max-width:800px){
    #sidebar{position:fixed;height:100%;transform:translateX(-100%);z-index:30}
    #sidebar.open{transform:translateX(0)}
    .workspace.open{position:fixed;right:0;top:0;bottom:0;width:100%;z-index:25}
    .ws-tree{width:160px;min-width:160px}
    .resizer{display:none!important}
    .diff-bar-content,.todo-dock,.mcp-panel,.followup-indicator{margin-left:8px;margin-right:8px}
}

/* Excel 解析相关样式 */
.f-excel-badge{font-size:9px;padding:1px 5px;border-radius:3px;margin-left:auto;flex-shrink:0;font-weight:600}
.f-excel-badge.pending{background:rgba(255,193,7,.15);color:var(--yellow)}
.f-excel-badge.done{background:rgba(40,167,69,.15);color:var(--green)}
.f-item.is-excel{cursor:pointer}
.f-item.is-excel:hover .f-excel-badge.pending{background:rgba(255,193,7,.3)}

#msg-input.drag-active{border-color:var(--ac);background:var(--ac-bg);outline:none}

.msg-attachment{margin-top:6px;padding:8px 10px;background:var(--bg0);border:1px dashed var(--border2);border-radius:6px;font-size:11px;color:var(--tx3);white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.5;max-height:200px;overflow-y:auto}

.excel-chip{display:inline-block;padding:1px 6px;margin:0 1px;background:rgba(40,167,69,.15);color:var(--green);border:1px solid rgba(40,167,69,.3);border-radius:3px;font-size:12px;font-weight:500}

.toast-processing{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--ac)}
.toast-processing .spinner{width:14px;height:14px;min-width:14px;border:2px solid var(--ac);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}

.toast-uploading{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--ac);min-width:240px}
.toast-uploading .upload-spinner{width:14px;height:14px;min-width:14px;border:2px solid var(--ac);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.toast-uploading .upload-msg{font-size:12px;color:var(--tx2)}

#btn-upload-excel:hover{color:var(--ac)}
#btn-clear-project{color:var(--tx3)}
#btn-clear-project:hover{color:var(--red)}
.btn-danger-solid{background:var(--red);color:#fff;border:none;padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600}
.btn-danger-solid:hover{opacity:.9}
.btn-danger-solid:disabled{opacity:.4;cursor:not-allowed}

.modal-danger{border-color:var(--red)}
.modal-danger .modal-title{color:var(--red)}
.clear-warning{font-size:13px;color:var(--tx2);line-height:1.7;margin-bottom:12px}
.clear-warning p{margin:6px 0}
.clear-warning code{background:var(--bg0);padding:1px 5px;border-radius:3px;font-size:12px;color:var(--ac)}
.clear-keep{color:var(--tx3);font-size:12px}
.clear-confirm-hint{color:var(--red);font-weight:500}

.excel-context-menu{position:fixed;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:4px;min-width:160px;box-shadow:0 4px 16px rgba(0,0,0,.3);z-index:1000}
.excel-context-menu .menu-item{padding:6px 12px;font-size:12px;color:var(--tx2);cursor:pointer;border-radius:4px}
.excel-context-menu .menu-item:hover{background:var(--bg3);color:var(--tx1)}
.excel-context-menu .menu-item.cancel{color:var(--tx4);border-top:1px solid var(--border);margin-top:2px;padding-top:8px}

/* 连接状态指示器 */
.conn-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:14px;font-size:11px;color:var(--tx3);cursor:default;user-select:none;transition:all .2s;background:var(--bg2);border:1px solid transparent}
.conn-dot{width:7px;height:7px;border-radius:50%;background:var(--tx4);transition:all .3s;flex-shrink:0}
.conn-status.conn-connected{color:var(--green);border-color:rgba(80,250,123,.15);background:rgba(80,250,123,.04)}
.conn-status.conn-connected .conn-dot{background:var(--green);box-shadow:0 0 6px rgba(80,250,123,.4)}
.conn-status.conn-connecting,.conn-status.conn-reconnecting{color:var(--yellow);border-color:rgba(241,250,140,.15);background:rgba(241,250,140,.04)}
.conn-status.conn-connecting .conn-dot,.conn-status.conn-reconnecting .conn-dot{background:var(--yellow);animation:conn-pulse 1.2s ease-in-out infinite;box-shadow:0 0 6px rgba(241,250,140,.4)}
.conn-status.conn-disconnected,.conn-status.conn-error{color:var(--red);cursor:pointer;background:rgba(255,85,85,.08);border-color:rgba(255,85,85,.15)}
.conn-status.conn-disconnected .conn-dot,.conn-status.conn-error .conn-dot{background:var(--red);box-shadow:0 0 6px rgba(255,85,85,.3)}
.conn-status.conn-disconnected:hover,.conn-status.conn-error:hover{background:rgba(255,85,85,.14)}
.conn-text{font-size:11px;white-space:nowrap;font-weight:500}
@keyframes conn-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ============================================================
 * 项目交付总结面板（render.js renderProjectSummary）
 * ============================================================ */
.delivery-summary {
    margin: 12px 0 12px 44px; /* 44px = 头像32px + gap12px，与消息正文对齐 */
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(80,250,123,.06), rgba(139,233,253,.06));
    border: 1px solid rgba(80,250,123,.3);
    border-radius: 10px;
    animation: ds-slide-in .4s ease;
    width: calc(100% - 44px); /* 补偿 margin-left */
}
@keyframes ds-slide-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.ds-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(80,250,123,.3);
}
.ds-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
}
.ds-stats {
    font-size: 12px;
    color: var(--tx3);
    font-family: var(--mono);
}
.ds-count {
    font-size: 18px;
    font-weight: 700;
    color: var(--green);
    margin-right: 2px;
}
.ds-exts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.ds-ext {
    font-size: 10px;
    padding: 2px 7px;
    background: var(--bg1);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--tx3);
    font-family: var(--mono);
}
.ds-files {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 220px;
    overflow-y: auto;
}
.ds-files li {
    padding: 4px 8px;
    background: var(--bg0);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ds-files li::before {
    content: '✓';
    color: var(--green);
    font-weight: 700;
    flex-shrink: 0;
}
.ds-filename {
    color: var(--cyan);
    word-break: break-all;
}
.ds-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.ds-btn {
    padding: 7px 14px;
    border: 1px solid var(--border2);
    border-radius: 6px;
    background: var(--bg1);
    color: var(--tx2);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.ds-btn:hover {
    background: var(--bg2);
    border-color: var(--ac);
    color: var(--tx1);
}
.ds-btn-primary {
    background: var(--orange);
    color: #1a1a1a;
    border-color: transparent;
    font-weight: 700;
}
.ds-btn-primary:hover {
    background: #ffc88a;
    color: #1a1a1a;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(255,184,108,.3);
}

/* ============================================================
 * 流程日志面板（flow-log.js）
 * Ctrl+Shift+L 打开/关闭
 * ============================================================ */
#flow-log-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 500px;
    max-width: 100vw;
    height: 350px;
    max-height: 50vh;
    background: var(--bg0);
    border: 1px solid var(--border2);
    border-radius: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    z-index: 10000;
    box-shadow: -4px -4px 20px rgba(0,0,0,.3);
    font-family: var(--mono);
    font-size: 11px;
}
.fl-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg1);
    border-radius: 10px 0 0 0;
    flex-shrink: 0;
}
.fl-title {
    font-weight: 700;
    color: var(--tx1);
    font-size: 12px;
}
.fl-count {
    color: var(--tx4);
    font-size: 10px;
}
.fl-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.fl-btn {
    padding: 3px 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--tx3);
    font-size: 10px;
    cursor: pointer;
    font-family: var(--mono);
    transition: all .12s;
}
.fl-btn:hover {
    background: var(--bg3);
    color: var(--tx1);
}
.fl-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.fl-empty {
    text-align: center;
    color: var(--tx4);
    padding: 30px;
    font-size: 11px;
}
.fl-entry {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 12px;
    border-bottom: 1px solid rgba(255,255,255,.02);
    line-height: 1.6;
}
.fl-entry:hover { background: rgba(255,255,255,.02); }
.fl-time {
    color: var(--tx4);
    font-size: 9px;
    flex-shrink: 0;
    min-width: 56px;
}
.fl-icon {
    font-size: 11px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
.fl-phase {
    color: var(--ac);
    font-size: 10px;
    flex-shrink: 0;
    min-width: 80px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fl-msg {
    color: var(--tx2);
    font-size: 10px;
    flex: 1;
}
.fl-data {
    color: var(--tx4);
    font-size: 9px;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.fl-info .fl-icon { color: var(--tx3); }
.fl-warn .fl-icon { color: var(--orange); }
.fl-warn { background: rgba(255,184,108,.03); }
.fl-error .fl-icon { color: var(--red); }
.fl-error { background: rgba(255,85,85,.04); }
.fl-success .fl-icon { color: var(--green); }
.fl-success { background: rgba(80,250,123,.03); }