:root{
  --bg:#0e1116;
  --bg2:#141922;
  --bg3:#1a2029;
  --side:#11161d;
  --line:#242c38;
  --line2:#2e3846;
  --tx:#dfe5ee;
  --tx2:#9aa6b8;
  --tx3:#6b7789;
  --acc:#4a9eff;
  --acc2:#2b7fe0;
  --ok:#3ecf8e;
  --warn:#f0a34a;
  --err:#f26b6b;
  --purple:#a97bff;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--tx);
  font:14px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2c3542;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#3a4553}
::-webkit-scrollbar-track{background:transparent}

.app{display:flex;height:100vh;overflow:hidden}

/* ---------- 侧栏 ---------- */
.side{
  width:236px;flex:0 0 236px;background:var(--side);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.logo{
  width:34px;height:34px;border-radius:9px;flex:0 0 34px;
  background:linear-gradient(135deg,var(--acc),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:17px;color:#fff;letter-spacing:0
}
.bt1{font-weight:600;font-size:14px;letter-spacing:.3px}
.bt2{font-size:11px;color:var(--tx3);margin-top:1px}
.nav{flex:1;overflow-y:auto;padding:10px 8px}
.nav-title{
  font-size:11px;color:var(--tx3);padding:12px 10px 6px;
  letter-spacing:1px;text-transform:uppercase;font-weight:600
}
.nav-btn{
  width:100%;text-align:left;background:none;border:none;color:var(--tx2);
  padding:9px 11px;border-radius:8px;cursor:pointer;font-size:13.5px;
  display:flex;align-items:center;gap:9px;transition:background .12s,color .12s;
  font-family:inherit;margin-bottom:1px
}
.nav-btn .ic{font-size:15px;width:19px;text-align:center;flex:0 0 19px}
.nav-btn:hover{background:#1b222c;color:var(--tx)}
.nav-btn.on{background:#1e2a3a;color:#fff;font-weight:500;box-shadow:inset 2px 0 0 var(--acc)}
.side-foot{padding:10px;border-top:1px solid var(--line)}
.sf-row{display:flex;gap:6px}
.sel{
  flex:1;min-width:0;background:var(--bg3);color:var(--tx2);border:1px solid var(--line2);
  border-radius:7px;padding:6px 8px;font-size:12px;font-family:inherit;cursor:pointer
}
.sf-tip{font-size:10.5px;color:var(--tx3);margin-top:7px;text-align:center}

/* ---------- 主区 ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.view{display:none;height:100%}

/* 聊天视图 */
.chat-view{flex-direction:column;display:none}
.msg-list{flex:1;overflow-y:auto;padding:22px 0 10px}
.msg-list>*{max-width:860px;margin:0 auto}
.msg{display:flex;gap:12px;padding:6px 26px 18px}
.msg .ava{
  width:28px;height:28px;flex:0 0 28px;border-radius:7px;display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:600;
  background:#232b36;color:var(--tx3);margin-top:2px
}
.msg.user .ava{background:#2a3a52;color:#7fb4ff}
.msg.ai .ava{background:linear-gradient(135deg,#2f4f7a,#3d3466);color:#cfe3ff}
.bubble{
  flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 17px;font-size:14px
}
.msg.user .bubble{background:#1b2431;border-color:#28323f}
.msg-ops{display:flex;gap:6px;margin-top:11px;padding-top:9px;border-top:1px solid var(--line)}
.msg-ops button{
  background:var(--bg3);border:1px solid var(--line2);color:var(--tx2);
  border-radius:6px;padding:3px 10px;font-size:11.5px;cursor:pointer;font-family:inherit
}
.msg-ops button:hover{background:#252d39;color:var(--tx)}

.empty{padding:60px 26px;text-align:center}
.ebig{font-size:21px;font-weight:600;margin-bottom:9px}
.esub{color:var(--tx2);font-size:13.5px;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:660px;margin:0 auto}
.chip{
  background:var(--bg2);border:1px solid var(--line2);color:var(--tx2);
  border-radius:16px;padding:7px 14px;font-size:12.5px;cursor:pointer;font-family:inherit;
  transition:all .12s
}
.chip:hover{border-color:var(--acc);color:#9fcaff;background:#18222f}

.composer{max-width:860px;margin:0 auto;width:100%;padding:8px 26px 20px}
.c-input{
  width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:11px;
  color:var(--tx);padding:13px 15px;font:14px/1.6 inherit;resize:none;
  max-height:200px;overflow-y:auto;outline:none;transition:border-color .12s
}
.c-input:focus{border-color:#37527a}
.c-input::placeholder{color:var(--tx3)}
.c-bar{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:12px}
.c-hint{font-size:11.5px;color:var(--tx3);flex:1;min-width:0;line-height:1.5}
.c-hint.warn-hint{color:#e8b96a;background:#2a2213;border:1px solid #4a3a1f;border-radius:7px;padding:5px 9px}
.warn-i{color:var(--warn)}

/* 按钮 */
.btn{
  border:1px solid transparent;border-radius:8px;padding:8px 17px;font-size:13px;
  cursor:pointer;font-family:inherit;font-weight:500;transition:all .12s;white-space:nowrap
}
.btn.primary{background:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc2)}
.btn.primary:disabled{background:#3a4b60;color:#7c8a9c;cursor:not-allowed}
.btn.stop{background:var(--warn);color:#1a1206}
.btn.ghost{background:var(--bg3);border-color:var(--line2);color:var(--tx2)}
.btn.ghost:hover{background:#262e3a;color:var(--tx)}
.btn.danger{background:#3a2226;border-color:#5a2f35;color:#ff9a9a}
.btn.danger:hover{background:#4a2a2f}
.mini-btn{padding:6px 12px;font-size:12.5px}
.mini{padding:3px 9px;font-size:11.5px;border-radius:6px;cursor:pointer;font-family:inherit}

/* ---------- 工具视图 ---------- */
.tool-view{flex-direction:column}
.tool-head{padding:20px 30px 14px;border-bottom:1px solid var(--line)}
.tool-head h2{font-size:19px;font-weight:600;margin-bottom:3px}
.tool-body{flex:1;display:flex;gap:0;min-height:0;overflow:hidden}
.tool-form{
  width:400px;flex:0 0 400px;padding:20px 26px;overflow-y:auto;
  border-right:1px solid var(--line);display:block
}
.tool-right{flex:1;min-width:0;display:flex;flex-direction:column;padding:18px 26px 20px}
.tool-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.tb-btns{display:flex;gap:7px}
.out-wrap{flex:1;overflow-y:auto;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.out-wrap[style*="none"]{display:none}
.field{display:block;margin-bottom:15px}
.field.tall textarea{min-height:110px}
.fl{display:block;font-size:12.5px;color:var(--tx2);margin-bottom:6px;font-weight:500}
.fl b{color:var(--err)}
.in{
  width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;
  color:var(--tx);padding:9px 12px;font:13.5px/1.6 inherit;outline:none;resize:vertical;
  transition:border-color .12s;font-family:inherit
}
.in:focus{border-color:#37527a}
.in::placeholder{color:#5c6878}
.in.err{border-color:var(--err)}
.ta-tall{min-height:300px}
.ta-md{min-height:150px}
.mini-in{width:190px}
.flex1{flex:1;min-width:0}

/* ---------- 通用区块视图 ---------- */
.page-view{display:none;overflow-y:auto;padding:24px 30px 50px}
.page-view>*{max-width:900px;margin-left:auto;margin-right:auto}
.ph{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.ph h2{font-size:19px;font-weight:600}
.card{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 20px;margin-bottom:16px
}
.card-h{font-size:13.5px;font-weight:600;margin-bottom:11px;color:var(--tx)}
.mut{color:var(--tx2)}
.small{font-size:12.5px}
.tight li{margin-left:18px;margin-bottom:4px}
.kb-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:11px 0}
.kb-list{display:flex;flex-direction:column;gap:7px}
.kb-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:9px 13px
}
.kb-i{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.tag{font-size:10.5px;padding:1px 7px;border-radius:4px;background:#2b3646;color:var(--tx2)}
.tag.builtin{background:#2d3f5c;color:#8fbaff}
.tag.user{background:#33412f;color:#9fd68a}
.vols{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:7px;margin-top:12px}
.vol{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:8px 12px
}
.vol.on{border-color:#2f5a3f;background:#1b2a22}
.vol-l{display:flex;align-items:center;gap:9px;min-width:0;cursor:pointer;flex:1}
.vol-l input{width:15px;height:15px;accent-color:var(--ok);cursor:pointer;flex:0 0 15px}
.vol-n{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vol.on .vol-n{color:#8fe0ac}
code{background:#1e2734;border:1px solid var(--line2);border-radius:4px;padding:1px 5px;font-size:12px;font-family:"Cascadia Code",Consolas,monospace;color:#9fd6ff}
.hit.need{border-color:#4a3a1f;background:#241d13}
.hk{font-size:10.5px;padding:1px 7px;border-radius:4px;background:#2b3646;color:var(--tx2)}
.hit.need .hk{background:#4a3a1f;color:#f0c37a}
.hit >>> button{vertical-align:middle}
.hits{display:flex;flex-direction:column;gap:9px;margin-top:11px}
.hit{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:10px 13px}
.hit-h{font-size:12.5px;color:var(--tx);margin-bottom:5px}
.hit-b{font-size:12.5px;color:var(--tx2);line-height:1.65}
.proj-form{max-width:640px}
.proj-form .field{margin-bottom:16px}
.test-out{margin-top:11px;min-height:18px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx2);margin:6px 0 14px;cursor:pointer}
.chk input{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}

/* ---------- Markdown 正文 ---------- */
.md-body{font-size:14px;line-height:1.82;color:var(--tx)}
.md-body p{margin:0 0 12px}
.md-body h1,.md-body h2,.md-body h3,.md-body h4,.md-body h5,.md-body h6{
  margin:20px 0 10px;line-height:1.4;font-weight:600;color:#fff
}
.md-body h1{font-size:19px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.md-body h2{font-size:16.5px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.md-body h3{font-size:15px;color:#b9d5ff}
.md-body h4,.md-body h5,.md-body h6{font-size:14px;color:#a8c4e8}
.md-body ul,.md-body ol{margin:0 0 12px;padding-left:22px}
.md-body li{margin-bottom:5px}
.md-body strong{color:#fff;font-weight:600}
.md-body em{color:#b8c7dc;font-style:normal}
.md-body code{
  background:#1e2734;border:1px solid var(--line2);border-radius:4px;
  padding:1px 5px;font-size:12.5px;font-family:"Cascadia Code",Consolas,monospace;color:#9fd6ff
}
.md-body pre{
  background:#171d26;border:1px solid var(--line2);border-radius:8px;
  padding:13px 15px;overflow-x:auto;margin:0 0 13px
}
.md-body pre code{background:none;border:none;padding:0;color:#c9d6e6}
.md-body blockquote{
  border-left:3px solid var(--acc);background:#161d28;padding:7px 14px;
  margin:0 0 12px;color:var(--tx2);border-radius:0 6px 6px 0
}
.md-body blockquote p{margin:0}
.md-body table{
  width:100%;border-collapse:collapse;margin:0 0 14px;font-size:13px;
  border:1px solid var(--line2);border-radius:6px;overflow:hidden
}
.md-body th{
  background:#1d2531;padding:8px 11px;text-align:left;
  font-weight:600;border-bottom:1px solid var(--line2);color:#cfe0f5
}
.md-body td{padding:7px 11px;border-bottom:1px solid var(--line)}
.md-body tr:last-child td{border-bottom:none}
.md-body hr{border:none;border-top:1px solid var(--line2);margin:18px 0}
.md-body>*:last-child{margin-bottom:0}

.placeholder{color:var(--tx3);font-size:13.5px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translate(-50%,14px);
  background:#222c3a;border:1px solid var(--line2);color:var(--tx);
  padding:10px 20px;border-radius:9px;font-size:13px;z-index:9999;
  opacity:0;transition:opacity .22s,transform .22s;box-shadow:0 8px 26px rgba(0,0,0,.45)
}
.toast.in{opacity:1;transform:translate(-50%,0)}

@media (max-width:1000px){
  .side{width:60px;flex:0 0 60px}
  .btext,.nav-btn span:last-child,.nav-title,.sf-tip,.sel{display:none}
  .nav-btn{justify-content:center;padding:11px 0}
  .side-foot{padding:8px 4px}
  .tool-body{flex-direction:column;overflow-y:auto}
  .tool-form{width:auto;flex:none;border-right:none;border-bottom:1px solid var(--line)}
}
