:root{
  --red:#B5121B; --red-d:#8E0E15; --red-l:#FBEDED; --ink:#1B1E22; --ink2:#454B53; --mute:#767E88;
  --line:#E2E4E8; --line2:#EDEEF1; --bg:#F6F6F7; --warm:#F3F1EE; --ok:#1E7F47; --ok-l:#E5F3EA; --warn:#9A5B00; --warn-l:#FFF3DE;
  --blue:#1F5FAD; --blue-l:#E7EFFA;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,'Segoe UI','Noto Sans SC','Microsoft YaHei',Arial,sans-serif;color:var(--ink);background:#fff;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}

/* ---------------- library website ---------------- */
.util{min-height:34px;background:#2A2C2F;color:#C7CACE;font-size:11.5px;display:flex;align-items:center;padding:0 40px;gap:22px;flex-wrap:wrap}
.util .r{margin-left:auto;display:flex;gap:14px;align-items:center}
.util select{background:#3A3D41;color:#fff;border:1px solid #55595F;border-radius:4px;padding:3px 6px;font-size:11.5px}
.util a,.util .lnk{color:#E7E9EB;text-decoration:none;border-bottom:1px dotted #8D9298}
.demo-tag{background:#F39C2C;color:#1B1E22;font-weight:700;border-radius:3px;padding:1px 6px;font-size:10.5px;letter-spacing:.3px}
.hdr{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 40px;gap:44px;background:#fff}
.logo{display:flex;align-items:center;gap:12px}
.logo .m{width:40px;height:40px;background:var(--red);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.logo b{font-size:19px;display:block;line-height:1.1}.logo small{font-size:11px;color:var(--mute);letter-spacing:.5px}
.menu{display:flex;gap:30px;font-size:14px;font-weight:600;color:var(--ink2)}
.hdr .ask{margin-left:auto;border:1.5px solid var(--red);color:var(--red);font-weight:700;padding:8px 16px;border-radius:4px;font-size:13px}
.searchband{background:var(--warm);padding:34px 40px 30px;border-bottom:1px solid var(--line)}
.searchband h1{font-size:26px;font-weight:700}
.tabs{display:flex;gap:4px;margin-top:16px}
.tabs span{padding:8px 16px;font-size:13px;font-weight:600;color:var(--ink2);border-radius:4px 4px 0 0}
.tabs span.on{background:#fff;color:var(--ink);box-shadow:0 -2px 0 var(--red) inset}
.sbox{display:flex;max-width:780px;height:50px;background:#fff;border:1px solid #CFD2D7;border-radius:0 4px 4px 4px}
.sbox .in{flex:1;padding:0 16px;display:flex;align-items:center;color:var(--mute);font-size:14px}
.sbox .go{width:120px;background:var(--red);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.slinks{margin-top:10px;font-size:12.5px;color:var(--ink2);display:flex;gap:18px;flex-wrap:wrap}
.slinks u{text-decoration:none;border-bottom:1px solid #A9AEB5}
.cols{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:44px;padding:30px 40px 90px}
.cols h3{font-size:15px;padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.ql div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line2);font-size:13.5px;cursor:pointer}
.ql div:after{content:"\203A";color:var(--mute);font-size:16px;line-height:1}
.ql div:hover{color:var(--red)}
.hrs div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.hrs div b{font-weight:600}.hrs .open{color:var(--ok);font-weight:700;font-size:12px}
.nw{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line2)}
.nw .dt{width:46px;flex:none;text-align:center;border:1px solid var(--line);border-radius:4px;padding:4px 0}
.nw .dt b{display:block;font-size:17px;line-height:1.1}.nw .dt small{font-size:10px;font-weight:700;color:var(--red)}
.nw p{font-size:13.5px;font-weight:600}.nw span{font-size:12px;color:var(--mute)}
.foot{background:#2A2C2F;color:#9DA2A8;font-size:11.5px;display:flex;align-items:center;padding:14px 40px}
.dim{position:fixed;inset:0;background:rgba(20,22,26,.18);z-index:5;display:none}
body.half-open .dim{display:block}

/* ---------------- launcher ---------------- */
.launcher{position:fixed;right:28px;bottom:24px;z-index:9;background:var(--red);color:#fff;border-radius:28px;height:52px;padding:0 20px 0 8px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(181,18,27,.35)}
.launcher .bot{width:38px;height:38px}
body.chat-open .launcher{display:none}

/* ---------------- chat shell ---------------- */
.chat{position:fixed;background:#fff;display:none;overflow:hidden;z-index:10}
body.chat-open .chat{display:flex}
.chat.float{right:28px;bottom:24px;width:440px;height:min(760px,calc(100vh - 48px));border-radius:14px;box-shadow:0 20px 50px rgba(20,25,35,.26),0 2px 6px rgba(20,25,35,.1);flex-direction:column}
.chat.half{right:0;top:0;bottom:0;width:min(780px,60vw);box-shadow:-18px 0 44px rgba(20,25,35,.18);flex-direction:row}
.chat .conv{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.ch{background:var(--red);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:12px;flex:none}
.bot{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.ch b{font-size:15px;display:block;line-height:1.2;white-space:nowrap}.ch small{font-size:11.5px;opacity:.9;display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:#86E6AC;display:inline-block}
.tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.tb{height:28px;min-width:28px;padding:0 7px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.12)}
.tb:hover{background:rgba(255,255,255,.22)}
.tb.on{background:#fff;color:var(--red)}
.seg{display:flex;background:rgba(255,255,255,.12);border-radius:7px;padding:2px;gap:2px}.seg .tb{background:transparent;height:24px;min-width:26px}.seg .tb.on{background:#fff}
.sub{display:flex;gap:16px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink2);background:#fff;flex:none}
.sub button{display:flex;align-items:center;gap:5px;font-weight:600}
.sub button:hover{color:var(--red)}
.sub .me{margin-left:auto;font-weight:500;color:var(--mute)}
.chat.half .sub .hist-btn{display:none}
.convtitle{padding:10px 22px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;background:#fff;flex:none;display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat.half .convtitle{display:block}
.cb{flex:1;padding:16px 18px;overflow-y:auto;background:#FAFAFB;display:flex;flex-direction:column;gap:12px;min-height:0}
.chat.half .cb{padding:18px 26px}
.msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.chat.half .msg{max-width:80%}
.msg.wide{max-width:100%!important;width:100%}
.u{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap}
.b{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.b p+p{margin-top:7px}.b ul,.b ol{margin:5px 0 3px 18px}.b li{margin:2px 0}
.b a{color:var(--blue)}
.b code{background:var(--bg);padding:0 4px;border-radius:3px;font-size:12px}
.b .seg-card{margin:8px 0}
.b .seg-card:first-child{margin-top:0}
.time{font-size:10.5px;color:var(--mute);align-self:center}
.meta{display:flex;gap:8px;margin-top:8px;font-size:11px;color:var(--mute);align-items:center;flex-wrap:wrap}
.meta .th{width:24px;height:22px;border:1px solid var(--line);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.meta .th.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.meta .rt{margin-left:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid #D9B3B5;color:var(--red);border-radius:14px;padding:5px 11px;font-size:12px;font-weight:600;background:#fff;text-align:left}
.chip:hover{background:var(--red-l)}
.ci{border-top:1px solid var(--line);padding:12px 14px;display:flex;gap:10px;align-items:flex-end;background:#fff;flex:none}
.ci textarea{flex:1;min-height:42px;max-height:120px;border:1px solid #D3D6DB;border-radius:21px;padding:11px 16px;font:inherit;font-size:13px;resize:none;outline:none;line-height:1.4}
.ci textarea:focus{border-color:#A8ADB4}
.ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink2)}
.ic.send{background:var(--red);border-color:var(--red);color:#fff}
.ic.send:disabled{opacity:.5}
.ic.rec{background:var(--red-l);border-color:var(--red);color:var(--red)}
.disc{font-size:10px;color:var(--mute);text-align:center;padding:0 14px 9px;background:#fff;flex:none}
.typing{display:flex;gap:4px;padding:12px 14px;align-self:flex-start}
.typing i{width:7px;height:7px;border-radius:50%;background:#B9BEC4;animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,80%,100%{opacity:.3}40%{opacity:1}}
.err{align-self:stretch;background:var(--red-l);color:var(--red-d);border-radius:8px;padding:9px 12px;font-size:12px}

/* history rail */
.rail{width:236px;background:#F3F4F6;border-right:1px solid var(--line);display:none;flex-direction:column;flex:none;min-height:0}
.chat.half .rail{display:flex}
.rail .rh{padding:14px 14px 10px}
.newc{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;font-weight:700;border-radius:8px;height:38px;font-size:13px;width:100%}
.hlist{overflow-y:auto;flex:1}
.grp{font-size:10.5px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.6px;padding:12px 16px 5px}
.hi{padding:8px 16px;font-size:12.5px;color:var(--ink2);display:flex;flex-direction:column;gap:1px;cursor:pointer;text-align:left;width:100%}
.hi:hover{background:#fff}
.hi small{font-size:11px;color:var(--mute)}
.hi.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--red)}
.rf{padding:12px 16px;font-size:10.5px;color:var(--mute);border-top:1px solid var(--line);line-height:1.5}
.histpane{background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px 0}

/* welcome */
.lbl{font-size:11.5px;font-weight:700;color:var(--mute);margin-top:4px}
.prompts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pr{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;font-size:12.5px;font-weight:600;display:flex;gap:9px;align-items:flex-start;line-height:1.35;text-align:left}
.pr:hover{border-color:#D9B3B5;background:#FFFBFB}
.pr svg{color:var(--red);margin-top:1px}
.pr small{display:block;font-weight:400;color:var(--mute);font-size:11px;margin-top:2px}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.card h5{font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.res{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2)}
.res:last-child{border-bottom:none}
.cov{width:34px;height:48px;border-radius:2px;flex:none}
.res b{font-size:12.5px;display:block;line-height:1.35}.res small{color:var(--mute);font-size:11px;display:block}
.tag{display:inline-block;font-size:10.5px;font-weight:700;border-radius:4px;padding:1px 6px;margin-top:4px;margin-right:4px}
.t-ok{background:var(--ok-l);color:var(--ok)}.t-blue{background:var(--blue-l);color:var(--blue)}.t-warn{background:var(--warn-l);color:var(--warn)}.t-red{background:var(--red-l);color:var(--red)}.t-grey{background:#EEF0F2;color:var(--ink2)}
.srcl{font-size:11px;color:var(--mute);margin-top:6px}
.note{font-size:12px;color:var(--ink2);background:var(--bg);border-radius:8px;padding:9px 11px}
.note.warn{background:var(--warn-l)}.note.warn b{color:var(--warn)}
.cite{font-family:Georgia,'Times New Roman',serif;font-size:12.5px;line-height:1.55;background:var(--bg);border-radius:8px;padding:9px 11px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 12px;font-weight:700;font-size:12px;color:var(--ink2)}
.btn:hover{border-color:#B9BEC4}
.btn.p{background:var(--red);border-color:var(--red);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.ok{display:flex;gap:10px;align-items:flex-start}
.ok .tick{width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.kv{display:grid;grid-template-columns:96px 1fr;row-gap:5px;font-size:12.5px;margin-top:6px}
.kv span{color:var(--mute)}
/* timeline */
.tlwrap{overflow-x:auto}
.tl{width:100%;min-width:380px;table-layout:fixed;border-collapse:separate;border-spacing:2px 4px;font-size:11px}
.tl th{font-weight:600;color:var(--mute);font-size:10px;text-align:left;padding:0 0 1px 1px;white-space:nowrap;overflow:visible}
.tl td.rn{font-weight:600;font-size:11.5px;padding-right:4px;white-space:nowrap}
.tl td.rn small{display:block;color:var(--mute);font-weight:400;font-size:10px}
.tl td.c{height:26px;border-radius:4px;background:#EEF7F1;border:1px solid #CFE7D8;cursor:pointer}
.tl td.c:hover{background:#D7EEDF}
.tl td.busy{background:repeating-linear-gradient(45deg,#F1F2F4,#F1F2F4 4px,#E6E8EB 4px,#E6E8EB 8px);border:1px solid #E1E3E6;cursor:not-allowed}
.tl td.mine{background:var(--blue);border-color:var(--blue);cursor:default}
.tl td.sel{background:var(--red);border-color:var(--red)}
.legend{display:flex;gap:12px;font-size:10.5px;color:var(--mute);margin-top:4px;align-items:center;flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.selbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;background:var(--bg);border-radius:8px;padding:7px 10px;font-size:12px}
.libmsg{align-self:flex-start;max-width:86%;background:#F2F7FF;border:1px solid #CFE0F6;border-radius:14px;border-bottom-left-radius:4px;padding:10px 13px;font-size:13px}
.libmsg .who{font-size:11px;font-weight:700;color:var(--blue);margin-bottom:3px}

/* ---------------- presenter panel ---------------- */
.trace{position:fixed;left:20px;top:46px;bottom:20px;width:400px;background:#15171A;color:#D5D8DC;border-radius:12px;z-index:11;display:none;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.35);font-size:12px}
body.trace-on .trace{display:flex}
.trace .th{padding:12px 14px;border-bottom:1px solid #2B2F34;display:flex;align-items:center;gap:8px}
.trace .th b{color:#fff;font-size:13px}
.trace .th .x{margin-left:auto;color:#9AA0A6;font-size:11px;border:1px solid #3A3F45;border-radius:5px;padding:2px 7px}
.trace .tb2{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.trace .intro{color:#9AA0A6;font-size:11.5px;line-height:1.5}
.ev{border:1px solid #2B2F34;border-radius:8px;padding:8px 10px;background:#1C1F23}
.ev .h{display:flex;gap:8px;align-items:center;font-weight:600;color:#fff}
.ev .h small{margin-left:auto;color:#8A9096;font-weight:400}
.ev .k{font-size:10px;font-weight:700;border-radius:4px;padding:1px 6px;letter-spacing:.3px}
.k-q{background:#2D3640;color:#9CC3F0}.k-m{background:#3F3420;color:#F2C46B}.k-t{background:#203A2C;color:#7FD6A1}.k-c{background:#33243A;color:#D3A6EE}.k-d{background:#2B2F34;color:#C7CACE}.k-e{background:#4A2024;color:#F59CA3}
.ev pre{margin-top:6px;white-space:pre-wrap;word-break:break-word;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#C9CDD2;max-height:220px;overflow:auto;background:#121417;border-radius:6px;padding:6px 8px}
.ev details summary{cursor:pointer;color:#8A9096;font-size:11px;margin-top:5px}
.ev .txt{margin-top:4px;color:#C9CDD2}
.sep{border-top:1px dashed #33373C;margin:4px 0}

/* gate */
.gate{position:fixed;inset:0;background:rgba(20,22,26,.55);z-index:50;display:none;align-items:center;justify-content:center}
.gate.on{display:flex}
.gate form{background:#fff;border-radius:12px;padding:24px;width:320px;display:flex;flex-direction:column;gap:12px}
.gate input{border:1px solid #D3D6DB;border-radius:8px;padding:10px 12px;font:inherit}

@media (max-width:900px){
  .menu,.hdr .ask{display:none}.cols{grid-template-columns:1fr}
  .chat.float,.chat.half{left:0;right:0;top:0;bottom:0;width:auto;height:auto;border-radius:0}
  .chat.half .rail{display:none}
  .trace{left:8px;right:8px;width:auto;top:auto;height:45vh}
}