:root{--bg:#0f1115;--panel:#161922;--panel2:#1c2030;--line:#262b3a;--text:#e6e8ee;--muted:#8a90a2;--accent:#5b8cff;--green:#3ecf8e;--amber:#f0b74a;--red:#ef6461;--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.hidden{display:none!important}
#app{height:100%;display:flex;flex-direction:column;max-width:760px;margin:0 auto;position:relative}
.view{flex:1;display:flex;flex-direction:column;min-height:0}
.top{padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 10px;flex:none}
.title{font-size:26px;font-weight:700}
.sub{color:var(--muted);font-size:12.5px;margin-top:4px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;flex:none}
.on{background:var(--green)}.off{background:#4a4f5e}.busy{background:var(--amber);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.4}}
.scroll{flex:1;overflow-y:auto;padding:0 14px 14px;-webkit-overflow-scrolling:touch}
.search{display:block;width:100%;background:var(--panel2);border:0;border-radius:12px;padding:10px 14px;color:var(--text);margin-bottom:14px;outline:none}
.search::placeholder{color:var(--muted)}
.seg{display:flex;background:var(--panel2);border-radius:10px;padding:3px;margin-bottom:14px}
.seg button{flex:1;text-align:center;padding:6px;border-radius:8px;font-size:13px;color:var(--muted)}
.seg .a{background:#2c3247;color:#fff}
.dev{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:12px}
.dev .hd{display:flex;align-items:center;font-weight:600;font-size:15px;gap:2px}
.dev .hd small{margin-left:auto;color:var(--muted);font-weight:400;font-size:12px}
.dev .new{margin-left:8px;font-size:12px;color:var(--accent);border:1px solid #2e3e72;border-radius:12px;padding:2px 9px}
.ag{display:flex;align-items:center;gap:10px;padding:10px 0 2px;width:100%;text-align:left}
.ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;color:#fff}
.ic.claude{background:linear-gradient(135deg,#d97757,#b85a3c)}.ic.hermes{background:linear-gradient(135deg,#5b8cff,#9b6bff)}.ic.codex{background:#2f3a2f;color:#8fe3a6}
.ag .mid{min-width:0;flex:1}
.ag .n{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag .l{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag .r{text-align:right;font-size:11.5px;color:var(--muted);flex:none}
.more-btn{display:block;width:100%;color:var(--muted);font-size:12.5px;padding:8px 0 0;text-align:center}
.offline{opacity:.5}
.empty{color:var(--muted);text-align:center;padding:40px 0;font-size:13px}
.tab{border-top:1px solid var(--line);background:var(--panel);display:flex;justify-content:space-around;padding:8px 0 calc(8px + var(--safe-b));flex:none}
.tab button{text-align:center;font-size:11px;color:var(--muted);flex:1}
.tab button b{display:block;font-size:20px;margin-bottom:1px;font-weight:400}
.tab .a{color:var(--accent)}
/* chat */
.ch{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 10px;border-bottom:1px solid var(--line);flex:none}
.ch .back{font-size:28px;color:var(--accent);padding:0 6px;line-height:1}
.ch .mid{min-width:0;flex:1}
.ch .t{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .s{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch}
.me{align-self:flex-end;max-width:86%}
.me .bb{background:#2d4bd8;border-radius:18px 18px 4px 18px;padding:10px 14px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ai{max-width:96%;align-self:flex-start}
.ai .bb{background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:10px 14px;line-height:1.65;word-break:break-word}
.ai .bb p{margin:0 0 .6em}.ai .bb p:last-child{margin:0}
.ai .bb pre{background:#0c0e13;border-radius:8px;padding:8px 10px;overflow-x:auto;font-size:12px;margin:.4em 0}
.mt{font-size:10.5px;color:var(--muted);margin:0 6px 4px}
.me .mt{text-align:right}
.tool{margin-top:8px;background:#0c0e13;border-radius:10px;padding:8px 10px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#a9b1c6;line-height:1.7;word-break:break-all}
.tool:first-child{margin-top:0}
.ok{color:var(--green)}.run{color:var(--amber)}.err{color:var(--red)}
code{font-family:ui-monospace,Menlo,monospace;background:#232838;padding:1px 5px;border-radius:4px;font-size:12.5px}
pre code{background:none;padding:0}
.cursor{display:inline-block;width:7px;height:14px;background:var(--accent);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.loadmore{align-self:center;font-size:12px;color:var(--muted);padding:4px 12px}
.comp{border-top:1px solid var(--line);background:var(--panel);padding:10px 12px calc(10px + var(--safe-b));flex:none}
.quick{display:flex;gap:8px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick button{white-space:nowrap;font-size:12px;padding:5px 10px;border-radius:14px;background:var(--panel2);color:#c5c9d6}
.inp{display:flex;align-items:flex-end;gap:10px}
.inp textarea{flex:1;background:var(--panel2);border:0;border-radius:18px;padding:9px 14px;resize:none;max-height:140px;outline:none;line-height:1.45}
.circ{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.sendb{background:var(--accent);color:#fff;font-size:18px}
.sendb:disabled{opacity:.4}
.stopb{background:#3a2226}.stopb i{width:12px;height:12px;background:#ff9b98;border-radius:2px}
.net{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);padding:6px 0 0}
/* search */
.res{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.res .h{display:flex;font-size:12px;color:var(--muted);margin-bottom:6px;gap:8px}
.res .h span:last-child{margin-left:auto;flex:none}
.res .q{font-weight:600;margin-bottom:4px}
.res .x{color:#b9bfd0;font-size:13px;line-height:1.55;word-break:break-word}
mark{background:#4a3d12;color:#ffd770;border-radius:3px;padding:0 2px}
.filter{display:flex;gap:8px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.filter button{white-space:nowrap;font-size:12px;padding:5px 10px;border-radius:14px;border:1px solid var(--line);color:var(--muted)}
.filter .a{border-color:var(--accent);color:#cfe0ff;background:#1d2747}
/* login / sheet */
.login{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 28px}
.login .logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#5b8cff,#9b6bff);margin-bottom:18px}
.login input{display:block;width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px;outline:none}
.login input:focus{border-color:var(--accent)}
.btn{display:block;width:100%;background:var(--accent);color:#fff;border-radius:12px;padding:12px;font-weight:600;margin-top:18px}
.btn.ghost{background:var(--panel2);color:var(--text)}
.msg-err{color:var(--red);font-size:13px;margin-top:12px;min-height:18px}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--panel);border-radius:18px 18px 0 0;padding:18px 18px calc(18px + var(--safe-b));width:100%;max-width:760px}
.sheet h3{font-size:16px;margin-bottom:12px}
.sheet .opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;border-bottom:1px solid var(--line);text-align:left}
.toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);background:#2c3247;padding:8px 14px;border-radius:10px;font-size:13px;z-index:20}
.kv{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line);font-size:14px}
.kv span:last-child{color:var(--muted)}
/* 图片 / 语音 / 改名 */
.imgs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-bottom:4px}
.imgs img{max-width:180px;max-height:220px;border-radius:12px;object-fit:cover;background:var(--panel2);cursor:zoom-in}
.me .bb+.bb,.imgs+.bb{margin-top:4px}
.mdimg{display:block;max-width:100%;max-height:320px;border-radius:10px;margin:.4em 0;cursor:zoom-in}
.zoom{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:30;display:grid;place-items:center}
.zoom img{max-width:100vw;max-height:100vh;object-fit:contain}
.tray{display:flex;gap:8px;overflow-x:auto}.tray:not(:empty){padding-bottom:8px}
.th{position:relative;flex:none}.th img{width:56px;height:56px;border-radius:10px;object-fit:cover;display:block}
.th.up img{opacity:.4}.th button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#444b5e;font-size:13px;line-height:1}
.attb,.micb{background:var(--panel2);font-size:17px}
.micb.rec{background:#d23b3b;color:#fff;font-size:12px;font-weight:600}
.dev .edit{margin-left:6px;color:var(--muted);font-size:13px;padding:0 4px}
.kv.row{width:100%;text-align:left}
.fld{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.fld>span{flex:none;min-width:84px;font-size:13px;color:var(--muted)}
.fld .ic{flex:none}
.fld input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;outline:none}
.fld input:focus{border-color:var(--accent)}
.sheet{max-height:85vh;overflow-y:auto}
.agrp{margin-top:10px;padding-left:10px;border-left:2px solid var(--line)}
.agh{display:flex;align-items:center;gap:8px;font-size:13px}
.agh .ic{width:22px;height:22px;font-size:11px;border-radius:6px}
.agh small{color:var(--muted);font-size:11.5px;margin-left:auto}
.agh .new{margin-left:6px;padding:0 8px}
.agempty{padding:6px 0 2px}
.fld select{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:inherit;outline:none}
.hbtn{flex:none;display:flex;flex-direction:column;align-items:center;font-size:16px;line-height:1.1;color:var(--accent);padding:2px 4px}
.hbtn small{font-size:10px}
.ri{display:block;width:100%;text-align:left;padding:10px 4px;border-bottom:1px solid var(--line)}
.ri .h{display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px;margin-bottom:3px}
.ri .x{font-size:13.5px;white-space:pre-wrap;word-break:break-word}