/* The Forteana desk: QUERY's chat layout (a fixed sidebar, a centred column of --max width, the composer the same width,
   centred on an empty thread and pinned to the bottom once it starts) in the paper look of the blog. */
:root{--paper:#f4eee2;--paper2:#ebe3d3;--ink:#1c1915;--rust:#a33a2b;--mute:#6b6257;--rule:#d9cfbc;--serif:"Source Serif 4",Georgia,serif;--display:"Fraunces",Georgia,serif;--mono:"IBM Plex Mono",Consolas,monospace;--max:760px;--side:270px}
@media(prefers-color-scheme:dark){:root{--paper:#17140f;--paper2:#201c15;--ink:#ece4d4;--mute:#a79b89;--rule:#3a3227;--rust:#d6604c}}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.55;overflow:hidden}
.hidden{display:none!important}.mono{font-family:var(--mono);font-size:12px;letter-spacing:1.2px;text-transform:uppercase}.note{color:var(--mute);font-size:14px}.spacer{flex:1}.err{color:var(--rust);min-height:1.2em}
button{font:inherit;background:none;border:1px solid var(--ink);color:var(--ink);padding:7px 12px;cursor:pointer;border-radius:0}button:hover{border-color:var(--rust);color:var(--rust)}button.primary{background:var(--ink);color:var(--paper)}button.primary:hover{background:var(--rust);border-color:var(--rust);color:#fff}button.danger{border-color:var(--rust);color:var(--rust)}
button.ico{border:0;padding:4px 7px;font-size:18px;line-height:1;color:var(--mute)}button.ico:hover{color:var(--rust)}button.small{font-size:11px;padding:3px 8px}
input,textarea,select{font:inherit;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:8px 10px;border-radius:0;width:100%}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--rust)}
/* sidebar */
#side{position:fixed;top:0;left:0;bottom:0;width:var(--side);border-right:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column;z-index:10;transition:transform .2s,width .2s}
.sidehead{display:flex;align-items:center;gap:4px;padding:12px 10px 8px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:17px;flex:1;min-width:0;overflow:hidden;white-space:nowrap}.brand i{font-style:italic;font-weight:400;color:var(--rust)}
.eye{width:16px;height:16px;border-radius:50%;border:3px solid var(--ink);position:relative;flex:none}.eye::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--rust)}
.searchwrap{padding:0 12px 8px}.searchwrap input{font-size:14px;padding:7px 10px}
.newchat{display:flex;align-items:center;gap:10px;margin:4px 12px;padding:8px 12px;text-align:left}.newchat b{font-size:18px;font-weight:600}
.recents-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 4px;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute)}
.sessions{overflow:auto;padding:0 8px}#threads{flex:1 1 40%;min-height:120px}#cases{flex:1 1 30%;min-height:80px}
.sess{display:flex;align-items:center;gap:6px;padding:7px 8px;cursor:pointer;font-size:14px;line-height:1.3;border-bottom:1px dotted var(--rule)}.sess:hover{background:var(--paper2)}.sess.on{background:var(--paper2);border-left:3px solid var(--rust);padding-left:5px}
.sess .t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sess small{display:block;color:var(--mute);font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-top:2px}.sess .pin{color:var(--rust);font-size:10px;flex:none}
.sess .more{opacity:0;border:0;padding:0 4px;font-size:16px;color:var(--mute)}.sess:hover .more{opacity:1}.sess input.rename{font-size:14px;padding:2px 6px}
.group{padding:10px 8px 2px;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute)}
.showmore{margin:6px 8px;width:calc(100% - 16px);font-size:13px}
.sidebar-bottom{border-top:1px solid var(--rule);padding:10px 12px}.sidebar-bottom button{width:100%;font-size:13px}
#side.rail{width:58px}#side.rail .brand,#side.rail .searchwrap,#side.rail .newchat span,#side.rail .recents-head,#side.rail .sessions,#side.rail .sidebar-bottom{display:none}#side.rail .sidehead{flex-direction:column}#side.rail .newchat{justify-content:center;margin:4px 8px}
#side.rail ~ #main{margin-left:58px}
/* main column */
#main{margin-left:var(--side);height:100%;display:flex;flex-direction:column;transition:margin .2s}
.topbar{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:3px double var(--ink);background:var(--paper)}
.topbar select{width:auto;font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:5px 8px}#menu{display:none}#status.ok{color:#2e7d4f}#status.bad{color:var(--rust)}
.shareb{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;padding:5px 10px}
.stage{flex:1;overflow:auto;display:flex;flex-direction:column}
.stage.empty{justify-content:center;align-items:center}.stage.empty .thread{display:none}.stage:not(.empty) .hello{display:none}
.hello{text-align:center;max-width:var(--max);width:100%;padding:0 20px}.hello h1{font-family:var(--display);font-size:38px;margin:0 0 8px}.hello h1 i{color:var(--rust);font-weight:400}
.thread{max-width:var(--max);width:100%;margin:0 auto;padding:26px 20px 12px}
.msg{display:flex;gap:14px;margin-bottom:24px}.msg .av{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0}
.msg.you .av{background:var(--paper2);border:1px solid var(--rule)}.msg.them .av{background:var(--ink);color:var(--paper)}
.bubble{flex:1;min-width:0;white-space:pre-wrap;word-wrap:break-word;padding-top:3px}.msg.err .bubble{color:var(--rust)}
.msg .who{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);margin-bottom:4px;white-space:normal}
.bubble img.pic{max-width:100%;display:block;margin:8px 0;border:1px solid var(--rule)}.bubble img.att{max-width:220px;display:block;margin:6px 0;border:1px solid var(--rule)}
.msgbar{margin-top:8px;opacity:0;transition:opacity .15s}.msg:hover .msgbar{opacity:1}.msgbar button{border:0;padding:2px 8px;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}.msgbar button:hover{color:var(--rust)}
.art{margin-top:10px;border:2px solid var(--ink);padding:12px 14px}.art h4{font-family:var(--display);font-size:20px;margin:0 0 6px}.art details{margin-top:8px}.art summary{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase}.art pre{white-space:pre-wrap;font-size:12px;max-height:300px;overflow:auto;background:var(--paper2);padding:8px}
.msg.wait .bubble{color:var(--mute);font-style:italic}
/* composer */
.composer{padding:14px 20px 18px}.composer .box{max-width:var(--max);margin:0 auto;border:1px solid var(--ink);background:var(--paper);padding:8px 10px 6px}
.composer textarea{border:0;padding:6px 4px;resize:none;min-height:34px;max-height:40vh;line-height:1.5}.composer textarea:focus{border:0}
.tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.tools .send{border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:18px;padding:2px 14px;line-height:1.4}.tools .send:hover{background:var(--rust);border-color:var(--rust)}
#ctx{color:var(--mute);display:flex;align-items:center;gap:8px}#ctx i{display:inline-block;width:80px;height:6px;border:1px solid var(--ink);position:relative}#ctx i b{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}#ctx.warn i b{background:var(--rust)}
.attachrow{display:flex;align-items:center;gap:10px;padding:4px 0 6px;border-bottom:1px dotted var(--rule);margin-bottom:6px}.attachrow img{height:48px;border:1px solid var(--rule)}
.foot{max-width:var(--max);margin:8px auto 0;color:var(--mute);font-size:11px}
#main.dropping{outline:2px dashed var(--rust);outline-offset:-8px}
/* dialogs */
.dlg{position:fixed;inset:0;background:rgba(10,8,5,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}.dlgbox{background:var(--paper);border:3px double var(--ink);padding:20px;width:min(560px,100%);max-height:90vh;overflow:auto}.dlgbox.wide{width:min(860px,100%)}
.dlgbox h2{font-family:var(--display);margin:0 0 12px;font-size:26px}.dlgbox h3{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);margin:18px 0 6px}.dlgbox label{display:block;margin:10px 0;font-family:var(--mono);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute)}.dlgbox label textarea,.dlgbox label select,.dlgbox label input{margin-top:6px;font-family:var(--serif);font-size:16px;text-transform:none;letter-spacing:0}.row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center}
.setrow{padding:6px 0}.setrow label{display:flex;gap:8px;align-items:center;font-family:var(--serif);font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink)}.setrow input[type=checkbox]{width:auto}.setrow select{width:auto;margin-left:8px}
.deskedit{font-family:var(--serif);font-size:15px;min-height:200px}
.pre{white-space:pre-wrap;font-family:var(--serif);font-size:15px;background:var(--paper2);padding:10px;max-height:30vh;overflow:auto;margin:0}
table{width:100%;border-collapse:collapse;font-size:14px}th{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;text-align:left;border-bottom:1px solid var(--ink);padding:4px 6px}td{padding:5px 6px;border-bottom:1px dotted var(--rule)}td.n,th.n{text-align:right;font-family:var(--mono);font-size:12.5px}
.menu{position:fixed;background:var(--paper);border:1px solid var(--ink);padding:6px 0;z-index:30;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.2)}.menu div{padding:6px 14px;cursor:pointer;font-size:14px}.menu div:hover{background:var(--paper2)}.menu div.h{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);cursor:default}.menu div.on{color:var(--rust)}
#key{position:fixed;inset:0;background:var(--paper);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}.keybox{width:min(420px,100%);text-align:center}.keybox h1{font-family:var(--display);font-size:34px;margin:0 0 8px}.keybox h1 i{color:var(--rust);font-weight:400}.keybox input{margin:10px 0}
@media(max-width:820px){#side{transform:translateX(-100%);width:82%}#side.open{transform:none}#main{margin-left:0!important}#menu{display:inline-block}.thread{padding:16px 14px 8px}.composer{padding:10px 12px 14px}}