:root{color-scheme:dark}
  *{box-sizing:border-box}
  body{margin:0;height:100vh;height:100dvh;font-family:'Segoe UI',system-ui,sans-serif;background:#1b1a19;color:#e8e6e3;overflow:hidden}
  *{scrollbar-width:thin;scrollbar-color:#454443 transparent}
  ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:#454443;border-radius:4px} ::-webkit-scrollbar-track{background:transparent}
  input:focus,textarea:focus,select:focus{outline:none;border-color:#6264a7}
  button:active{transform:translateY(1px)}
  #gate{position:fixed;inset:0;background:#1b1a19;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
  #gate input{background:#292827;color:#e8e6e3;border:1px solid #3d3c3b;border-radius:6px;padding:10px;font-size:16px;width:min(320px,90vw)}
  button{background:#6264a7;color:#fff;border:0;border-radius:6px;padding:8px 14px;font-size:14px;cursor:pointer}
  button:hover{filter:brightness(1.1)} button.ic{background:#3d3c3b;padding:6px 9px}
  #app{display:none;height:100vh;height:100dvh;grid-template-columns:290px 1fr;transition:grid-template-columns .18s ease}
  #app.rail-closed{grid-template-columns:0 1fr}
  #backdrop{display:none}
  /* rail */
  #rail{background:#252423;border-right:1px solid #3d3c3b;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
  #app.rail-closed #rail{border-right:0}
  .rhead{padding:12px 12px 8px;display:flex;align-items:center;gap:8px}
  .rhead b{font-size:18px;font-weight:700}
  #filter{margin:0 8px 8px;padding:8px 12px;background:#292827;border:1px solid #3d3c3b;border-radius:18px;color:#e8e6e3;font-size:13px}
  #chatlist{flex:1;overflow:auto;min-height:0;padding-bottom:6px}
  .grp{display:flex;align-items:center;gap:6px;padding:9px 12px 3px;cursor:pointer;color:#a9a7a5;font-size:12px;font-weight:600;user-select:none}
  .grp:hover{color:#e8e6e3}
  .grp .chev{font-size:9px;transition:transform .15s;width:9px;text-align:center}
  .grp.collapsed .chev{transform:rotate(-90deg)}
  .grp .gc{margin-left:auto;font-size:11px;color:#8a8886}
  .grp .gp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8ab4f8}
  .row{display:flex;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;position:relative}
  .row:hover{background:#302f2e}
  .row.active{background:#3a3937}
  .row.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:#5b5fc7}
  .av{width:36px;height:36px;border-radius:50%;background:#4a4a7a;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#fff;flex:0 0 auto;position:relative}
  .av .st{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid #252423;background:#6e6e6e}
  .av .st.working{background:#f5c518} .av .st.idle{background:#92c353}
  .meta{flex:1;min-width:0}
  .nm{display:flex;justify-content:space-between;gap:6px;font-size:14px}
  .nm .nmx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
  .row.unread .nm .nmx{font-weight:700}
  .nm .t{font-size:11px;color:#a9a7a5;flex:0 0 auto}
  .bl{font-size:12.5px;color:#a9a7a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row.unread .bl{color:#d0cfcd}
  .fold{color:#8ab4f8}
  .badge{background:#c4314b;color:#fff;border-radius:10px;font-size:11px;padding:0 6px;min-width:18px;text-align:center;flex:0 0 auto}
  .ren{opacity:0;font-size:12px;color:#a9a7a5;padding:0 3px} .row:hover .ren{opacity:.8}
  .arc{opacity:0;font-size:12px;color:#a9a7a5;padding:0 3px} .row:hover .arc{opacity:.85} .arc:hover{color:#e8e6e3}
  .row.arch{opacity:.55} .row.arch:hover{opacity:1}
  /* main */
  #main{display:flex;flex-direction:column;min-width:0;min-height:0}
  #mhead{padding:10px 14px;border-bottom:1px solid #3d3c3b;display:flex;align-items:center;gap:10px;background:#201f1e}
  #mtitle{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mhead .sub{font-size:11px;color:#a9a7a5}
  .metarow{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}
  .chip{font-size:11px;padding:2px 7px;border-radius:9px;background:#33322f;color:#c8c6c4;white-space:nowrap}
  .chip.warn{background:#3a2a12;color:#f5c518}
  .chip.model{background:#3a3b63;color:#cfd0f5;font-weight:600;border:1px solid #4b4d80}
  .chip:empty{display:none}
  button.ic.danger{background:#7a2320}
  button.ic.danger:hover{background:#a4262c}
  #modelSel{font-size:11px;padding:2px 6px;max-width:160px}
  label.live{font-size:12px;color:#c8c6c4;display:flex;align-items:center;gap:4px;cursor:pointer}
  select{background:#292827;color:#e8e6e3;border:1px solid #3d3c3b;border-radius:6px;padding:4px;font-size:12px}
  #msgs{flex:1;overflow:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:4px;min-height:0}
  .mrow{display:flex;gap:8px;align-items:flex-end;align-self:flex-start;max-width:88%}
  .mav{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:#c96442}
  .mav.spacer{visibility:hidden}
  .b{max-width:82%;padding:8px 12px;border-radius:8px;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.45}
  .mrow .b{max-width:100%}
  .b .ts{font-size:10px;color:#8a8886;margin-top:4px;display:flex;gap:6px;align-items:center}
  .assistant{background:#2b2a29;border:1px solid #3a3938;border-radius:8px 8px 8px 3px}
  .md{white-space:normal;line-height:1.5}
  .md .mdp{margin:0 0 8px} .md>*:last-child{margin-bottom:0}
  .md pre{background:#1b1a19;border:1px solid #3a3938;border-radius:6px;padding:9px 11px;overflow-x:auto;margin:6px 0}
  .md pre code{background:none;border:0;padding:0;white-space:pre;font-size:12.5px;color:#e8e6e3}
  .md .mdcode{border:1px solid #3a3938;border-radius:6px;margin:6px 0;overflow:hidden}
  .md .mdcode-bar{display:flex;justify-content:space-between;align-items:center;background:#232221;padding:3px 8px;font-size:11px;color:#8a8886}
  .md .mdcode-lang{text-transform:lowercase;letter-spacing:.5px}
  .md .mdcode-copy{background:#333130;color:#e8e6e3;border:1px solid #3a3938;border-radius:4px;padding:2px 8px;font-size:11px;cursor:pointer}
  .md .mdcode-copy:hover{filter:brightness(1.25)}
  .md .mdcode pre{border:0;border-radius:0;margin:0}
  .shj-syn-cmnt{color:#8b949e;font-style:italic} .shj-syn-kwd{color:#ff7b72} .shj-syn-str{color:#a5d6ff} .shj-syn-num{color:#79c0ff} .shj-syn-func{color:#d2a8ff}
  .md code{background:#1b1a19;border:1px solid #3a3938;border-radius:4px;padding:0 4px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
  .md h1,.md h2,.md h3,.md h4,.md h5,.md h6{margin:10px 0 5px;line-height:1.25;font-weight:700}
  .md h1{font-size:18px} .md h2{font-size:16px} .md h3{font-size:15px} .md h4,.md h5,.md h6{font-size:13.5px}
  .md ul,.md ol{margin:5px 0;padding-left:22px} .md li{margin:2px 0}
  .md blockquote{margin:6px 0;padding:2px 10px;border-left:3px solid #4b4d80;color:#c8c6c4}
  .md a{color:#8ab4f8;text-decoration:underline} .md a:hover{filter:brightness(1.15)}
  .md hr{border:0;border-top:1px solid #3d3c3b;margin:8px 0}
  .md .mdtable{overflow-x:auto;margin:6px 0} .md table{border-collapse:collapse;font-size:12.5px}
  .md th,.md td{border:1px solid #3a3938;padding:4px 8px;text-align:left} .md th{background:#2b2a29;font-weight:600}
  .tool{background:#232322;border:1px dashed #3a3938;color:#b9b7b5;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;border-radius:8px}
  .ask{background:#26263a;border:1px solid #4b4d80;border-radius:8px}
  .askcard{background:#26263a;border:1px solid #4b4d80;border-radius:8px;padding:12px;max-width:100%;display:flex;flex-direction:column;gap:8px}
  .askcard .q{font-size:14px;font-weight:600;line-height:1.4}
  .askcard .opt{text-align:left;background:#33334f;border:1px solid #45477a;border-radius:8px;padding:9px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;width:100%;color:#e8e6e3;transition:background .12s,border-color .12s}
  .askcard .opt:hover{background:#3d3d5e;border-color:#6366b8}
  .askcard .opt .ol{font-size:13.5px;font-weight:600}
  .askcard .opt .od{font-size:11.5px;color:#b8b6d0;line-height:1.35}
  .askcard.multi .opt{position:relative;padding-left:34px}
  .askcard.multi .opt::before{content:'';position:absolute;left:11px;top:11px;width:15px;height:15px;border:1.5px solid #6366b8;border-radius:4px}
  .askcard.multi .opt.sel{background:#3a3a66;border-color:#7c7fdb}
  .askcard.multi .opt.sel::before{content:'✓';color:#fff;background:#5b5fc7;border-color:#5b5fc7;font-size:11px;line-height:15px;text-align:center;font-weight:700}
  .askcard .other{display:flex;gap:6px}
  .askcard .other input{flex:1;background:#1c1c2b;color:#e8e6e3;border:1px solid #45477a;border-radius:8px;padding:8px 10px;font-size:13.5px;font-family:inherit}
  .askcard .other input::placeholder{color:#8a89a8}
  .askcard button.qsend,.askcard button.qsub{background:#5b5fc7;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
  .askcard button.qsend:hover,.askcard button.qsub:hover{background:#6b6fd4}
  .askcard .hint{font-size:11px;color:#a9a7c4}
  .askcard.done{opacity:.7;border-color:#3a3938}
  .askcard.done .opt,.askcard.done .other,.askcard.done .qsub{display:none}
  .askcard .answered{font-size:13px;color:#5bc07a;font-weight:600}
  .tick{font-weight:700;letter-spacing:-1px}
  .tick.sent,.tick.ok{color:#5bc07a} .tick.fail{color:#f85149} .tick.pending{color:#8a8886}
  .you{align-self:flex-end;background:#5b5fc7;color:#fff;border-radius:8px 8px 3px 8px}
  .you .ts{color:#d7d8f5}
  .sys{align-self:center;font-size:11.5px;color:#bdbdbd;background:#2a2928;border-radius:10px;padding:3px 12px;margin:2px 0}
  .empty{color:#8a8886;text-align:center;margin:auto;font-size:13px}
  .typing{align-self:flex-start;display:flex;align-items:center;gap:5px;background:#2a2928;border-radius:8px 8px 8px 3px;padding:10px 13px;margin:2px 0;max-width:92%}
  .typing .tdot{width:6px;height:6px;border-radius:50%;background:#8a8886;animation:tblink 1.2s infinite ease-in-out}
  .typing .tdot:nth-child(2){animation-delay:.2s} .typing .tdot:nth-child(3){animation-delay:.4s}
  .typing .tlbl{margin-left:6px;font-size:12px;color:#a9a7a5}
  @keyframes tblink{0%,80%,100%{opacity:.3} 40%{opacity:1}}
  #compose{display:flex;gap:8px;padding:10px;border-top:1px solid #3d3c3b;background:#201f1e;align-items:flex-end}
  #box{flex:1;min-height:46px;max-height:45vh;height:60px;resize:vertical;background:#292827;color:#e8e6e3;border:1px solid #3d3c3b;border-radius:8px;padding:9px;font:inherit;font-size:14px}
  .conn{font-size:11px;padding:3px 8px;border-radius:10px;background:#3d3c3b;white-space:nowrap}
  .conn.ok{background:#12331d;color:#3fb950} .conn.bad{background:#3a1414;color:#f85149}
  .menu{position:fixed;z-index:60;background:#292827;border:1px solid #3d3c3b;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:5px;min-width:214px;max-width:300px;max-height:60vh;overflow:auto}
  .menu .mh{font-size:11px;color:#a9a7a5;padding:6px 9px 4px}
  .menu .mi{padding:8px 9px;border-radius:6px;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
  .menu .mi:hover,.menu .mi.sel{background:#37363a}
  .menu .mi .sh{margin-left:auto;color:#a9a7a5;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
  .menu .mi .sa{color:#8a8886}
  .menu .mc{margin-left:auto;background:#3d3c3b;color:#c8c6c4;border-radius:9px;font-size:10px;padding:0 6px;flex:0 0 auto}
  #toasts{position:fixed;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:50}
  .toast{background:#2b2a29;border:1px solid #3d3c3b;border-left:3px solid #6264a7;border-radius:6px;padding:9px 13px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.4);max-width:300px;cursor:pointer}
  .danger{background:#a4262c!important}
  @media (max-width:720px){
    #app{grid-template-columns:1fr!important}
    #rail{position:fixed;top:0;bottom:0;left:0;width:min(86vw,330px);z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.55)}
    #app:not(.rail-closed) #rail{transform:none}
    #backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35}
    #app:not(.rail-closed) #backdrop{display:block}
    #mhead{flex-wrap:wrap;row-gap:6px}
    #mhead>div{flex:1 1 66% !important;min-width:66% !important}
    #msub{display:none}
    .b{max-width:92%}
    #box{font-size:16px}
    #filter{font-size:16px}
    button.ic{padding:8px 11px}
    #toasts{top:auto;bottom:82px;left:12px;right:12px;align-items:center}
    .toast{max-width:94vw}
  }