/* Bidnii Chat — 2026: floating islands, space-tinted ambient glow, live game cards, icon reactions, command palette */
:root{--ink:#08070E;--s1:#100F18;--s2:#16151F;--s3:#1E1C2A;--s4:#272536;--ln:rgba(255,255,255,.06);--ln2:rgba(255,255,255,.11);--tx:#ECEAF6;--tx2:#C9C6DB;--mt:#8B87A3;--acc:#FF8A1F;--acc-t:rgba(255,138,31,.14);--grn:#3DDC84;--red:#FF4D67;--yel:#FACC15;--r:20px;--rail:76px;--chw:268px;--mew:256px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--ink);color:var(--tx);font:500 14.5px/1.5 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:9px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:none}
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vw 50vh at 10% -10%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),radial-gradient(50vw 50vh at 100% 110%,rgba(109,74,255,.16),transparent 70%);transition:background .5s}

/* ---------- layout: islands ---------- */
.app{display:grid;grid-template-columns:var(--rail) var(--chw) minmax(0,1fr) var(--mew);gap:8px;height:100vh;height:100dvh;padding:8px}
.app.nomem{grid-template-columns:var(--rail) var(--chw) minmax(0,1fr) 0}.app.nomem .mem{display:none}
.isl{min-height:0;border:1px solid var(--ln);border-radius:var(--r);background:color-mix(in srgb,var(--s1) 88%,transparent);backdrop-filter:blur(20px) saturate(1.3)}

/* rail */
.rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;overflow-y:auto;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.rail .home{width:50px;height:50px;display:grid;place-items:center;border-radius:16px;background:var(--s3)}.rail .home img{width:30px;height:30px}
.rail hr{width:32px;border:0;border-top:2px solid var(--ln);margin:2px 0}
.sp{position:relative;width:50px;height:50px;flex:none;display:grid;place-items:center;border:0;border-radius:16px;background:var(--s3);color:#fff;font:400 17px 'Russo One',sans-serif;transition:border-radius .2s,transform .15s,box-shadow .2s}
.sp:hover{border-radius:14px;transform:translateY(-1px)}.sp.on{border-radius:14px;background:var(--c);box-shadow:0 8px 26px -8px var(--c);color:#120A00}
.sp::before{content:"";position:absolute;left:-13px;top:50%;width:4px;height:0;border-radius:0 4px 4px 0;background:#fff;transform:translateY(-50%);transition:height .2s}.sp.on::before{height:30px}.sp.un::before{height:8px}
.sp .bd{position:absolute;right:-4px;bottom:-4px;min-width:20px;height:20px;padding:0 5px;border:3px solid var(--s1);border-radius:999px;background:var(--red);color:#fff;font:800 10.5px/14px Manrope,sans-serif}
.sp.add,.sp.disc{background:transparent;border:1.5px dashed var(--ln2);color:var(--grn)}.sp.disc{color:var(--tx2);border-style:solid}.sp.add:hover{background:var(--grn);color:#062;border-color:var(--grn)}
.tip{position:fixed;z-index:90;padding:7px 11px;border-radius:10px;background:#000;color:#fff;font-size:13px;font-weight:800;pointer-events:none;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* channels */
.chs{display:flex;flex-direction:column;overflow:hidden}
.sh{position:relative;padding:16px 16px 14px;border-bottom:1px solid var(--ln);overflow:hidden}
.sh::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 30%,transparent),transparent 65%);opacity:.7}
.sh>*{position:relative}.sh h2{display:flex;align-items:center;gap:7px;margin:0;font:400 17px/1.2 'Russo One',sans-serif}.sh h2 .i{width:16px;height:16px;color:var(--acc)}
.sh p{margin:5px 0 0;color:var(--tx2);font-size:12.5px;line-height:1.4}
.sh .gear{position:absolute;right:10px;top:12px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:9px;background:rgba(0,0,0,.25);color:var(--tx2)}.sh .gear:hover{color:#fff}
.chl{flex:1;overflow-y:auto;padding:10px 8px}
.grp{display:flex;align-items:center;justify-content:space-between;margin:12px 8px 6px;color:var(--mt);font:800 11px Manrope,sans-serif;text-transform:uppercase;letter-spacing:.09em}.grp button{border:0;background:none;color:var(--mt);padding:2px;border-radius:6px}.grp button:hover{color:#fff}
.ch{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;margin:1px 0;border:0;border-radius:11px;background:none;color:var(--mt);text-align:left;font-weight:700;transition:background .12s,color .12s}
.ch:hover{background:var(--s3);color:var(--tx2)}.ch.on{background:var(--acc-t);color:#fff}.ch.on .i{color:var(--acc)}.ch.un{color:#fff}
.ch span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ch em{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--red);color:#fff;font:800 11px Manrope,sans-serif;font-style:normal;text-align:center}
/* live game card */
.gc{margin:10px 8px 4px;padding:12px;border:1px solid var(--ln2);border-radius:16px;background:linear-gradient(160deg,var(--s3),var(--s2))}
.gc .gh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--mt);font:800 10.5px Manrope,sans-serif;text-transform:uppercase;letter-spacing:.09em}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--grn)}.live i{width:7px;height:7px;border-radius:50%;background:var(--grn);animation:pu 2s infinite}.live.off{color:var(--red)}.live.off i{background:var(--red);animation:none}
@keyframes pu{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 7px rgba(61,220,132,0)}100%{box-shadow:none}}
.gs{display:flex;align-items:center;gap:10px;padding:7px 0}.gs+.gs{border-top:1px solid var(--ln)}.gs div{flex:1;min-width:0}.gs b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gs small{color:var(--mt);font-size:12px}
.gs a{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--acc);color:#120A00}.gs a .i{width:15px;height:15px}
.gc .pbar{height:4px;margin-top:5px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}.gc .pbar i{display:block;height:100%;background:var(--grn)}
/* me bar */
.meb{display:flex;align-items:center;gap:10px;margin:8px;padding:8px;border-radius:14px;background:var(--s2)}.meb div{flex:1;min-width:0}.meb b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meb small{color:var(--grn);font-size:11.5px;font-weight:800}
.ib{display:grid;place-items:center;width:34px;height:34px;flex:none;border:0;border-radius:10px;background:none;color:var(--mt);transition:background .12s,color .12s}.ib:hover{background:var(--s3);color:#fff}.ib.on{color:var(--acc)}

/* avatar */
.av{position:relative;width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--s4) center/cover;color:#fff;font:800 15px Manrope,sans-serif;text-transform:uppercase}
.av.sm{width:32px;height:32px;border-radius:11px;font-size:13px}.av .pr{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border:3px solid var(--s1);border-radius:50%;background:#55526A}.av .pr.on{background:var(--grn)}

/* main */
.main{display:flex;flex-direction:column;overflow:hidden;position:relative}
.mh{display:flex;align-items:center;gap:10px;height:58px;flex:none;padding:0 12px 0 18px;border-bottom:1px solid var(--ln)}
.mh .t{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.mh .t b{font-size:15.5px;white-space:nowrap}.mh .t .i{color:var(--mt)}.mh .t small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mt);font-size:13px;padding-left:10px;border-left:1px solid var(--ln2)}
.mh .mob{display:none}
.kbd{display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 12px;border:1px solid var(--ln);border-radius:11px;background:var(--s2);color:var(--mt);font-size:13px;font-weight:700}.kbd kbd{padding:1px 6px;border-radius:6px;background:var(--s4);font:800 11px Manrope,sans-serif}
.msgs{flex:1;overflow-y:auto;padding:10px 0 6px;overscroll-behavior:contain}
.welcome{padding:30px 22px 18px}.welcome .big{display:grid;place-items:center;width:64px;height:64px;margin-bottom:14px;border-radius:20px;background:var(--acc-t);color:var(--acc)}.welcome .big .i{width:30px;height:30px}
.welcome h3{margin:0;font:400 26px/1.2 'Russo One',sans-serif}.welcome p{margin:6px 0 0;color:var(--mt)}
.day{display:flex;align-items:center;gap:12px;margin:14px 22px 6px;color:var(--mt);font-size:12px;font-weight:800}.day::before,.day::after{content:"";flex:1;border-top:1px solid var(--ln)}
.m{position:relative;display:grid;grid-template-columns:40px 1fr;gap:0 14px;padding:3px 22px;transition:background .1s}
.m.first{margin-top:12px;padding-top:6px}.m:hover{background:rgba(255,255,255,.025)}.m.me-ment{background:color-mix(in srgb,var(--yel) 8%,transparent);box-shadow:inset 3px 0 0 var(--yel)}
.m .av{grid-row:span 2;cursor:pointer}.m .tm{grid-column:1;align-self:center;color:transparent;font-size:10.5px;font-weight:700;text-align:right}.m:hover .tm{color:var(--mt)}
.m .hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.m .hd b{font-weight:800;cursor:pointer}.m .hd b:hover{text-decoration:underline}.m .hd time{color:var(--mt);font-size:11.5px;font-weight:700}
.tag{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:6px;font:800 10px Manrope,sans-serif;text-transform:uppercase;letter-spacing:.05em;vertical-align:1px}.tag .i{width:11px;height:11px}.tag.own{background:rgba(250,204,21,.14);color:var(--yel)}.tag.adm{background:rgba(139,92,246,.18);color:#B9A0FF}.tag.stf{background:var(--acc-t);color:var(--acc)}
.bd2{grid-column:2;min-width:0;color:var(--tx2);white-space:pre-wrap;word-break:break-word}.bd2 a{color:#7CC4FF;text-decoration:none}.bd2 a:hover{text-decoration:underline}
.bd2 code{padding:1px 5px;border-radius:5px;background:var(--s4);font:600 13px ui-monospace,Menlo,Consolas,monospace}.bd2 strong{color:#fff}.bd2 .mn{padding:0 3px;border-radius:5px;background:var(--acc-t);color:var(--acc);font-weight:800}
.bd2 .ed{color:var(--mt);font-size:11px}.bd2.del{color:var(--mt);font-style:italic}
.m.hasrp .rp{grid-row:1}.m.hasrp>.av{grid-row:2/span 2}.m.hasrp .hd{grid-row:2}
.rp{grid-column:2;display:flex;align-items:center;gap:6px;margin-bottom:2px;color:var(--mt);font-size:12.5px;cursor:pointer;min-width:0}.rp .i{width:14px;height:14px;transform:scaleX(-1)}.rp b{color:var(--tx2)}.rp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.rx button{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border:1px solid var(--ln);border-radius:999px;background:var(--s2);color:var(--tx2);font-weight:800;font-size:12px;transition:transform .12s}
.rx button:hover{transform:translateY(-1px);border-color:var(--ln2)}.rx button.mine{border-color:var(--acc);background:var(--acc-t);color:#fff}.rx .i{width:14px;height:14px}
.rx .r-heart{color:#FF4D8D}.rx .r-flame{color:#FF8A1F}.rx .r-star{color:#FACC15}.rx .r-trophy{color:#22D3EE}.rx .r-check{color:#3DDC84}
.m.sys{grid-template-columns:40px 1fr;padding-top:4px;padding-bottom:4px}.m.sys .si{display:grid;place-items:center;color:var(--grn)}.m.sys .bd2{color:var(--mt);font-size:13px}.m.sys .bd2 b{color:var(--tx2)}
.tools{position:absolute;right:18px;top:-14px;display:none;gap:2px;padding:3px;border:1px solid var(--ln2);border-radius:12px;background:var(--s2);box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.m:hover .tools,.tools.open{display:flex}.tools button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:9px;background:none;color:var(--tx2)}.tools button:hover{background:var(--s4);color:#fff}.tools button.dg:hover{color:var(--red)}.tools .i{width:16px;height:16px}
.tools .sep{width:1px;margin:5px 2px;background:var(--ln2)}
.m.edit .bd2{display:none}.ebox{grid-column:2}.ebox textarea{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--acc);border-radius:12px;background:var(--s2);outline:0;resize:none}.ebox small{color:var(--mt);font-size:12px}.ebox small b{color:var(--acc);cursor:pointer}
.jump{position:absolute;left:50%;bottom:96px;z-index:5;display:none;align-items:center;gap:7px;padding:8px 14px;border:0;border-radius:999px;background:var(--acc);color:#120A00;font-weight:800;font-size:13px;transform:translateX(-50%);box-shadow:0 10px 30px -10px var(--acc)}.jump.on{display:inline-flex}
.more{display:block;margin:6px auto;padding:7px 14px;border:1px solid var(--ln);border-radius:999px;background:var(--s2);color:var(--tx2);font-weight:800;font-size:12.5px}

/* composer */
.cmp{flex:none;padding:0 16px 14px}
.typ{height:20px;padding:0 6px;color:var(--mt);font-size:12px;font-weight:700}.typ i{display:inline-block;width:5px;height:5px;margin-right:2px;border-radius:50%;background:var(--mt);animation:td 1.2s infinite}.typ i:nth-child(2){animation-delay:.15s}.typ i:nth-child(3){animation-delay:.3s;margin-right:7px}
@keyframes td{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.cbox{position:relative;border:1px solid var(--ln2);border-radius:18px;background:var(--s2);transition:border-color .15s,box-shadow .15s}.cbox:focus-within{border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 0 0 4px var(--acc-t)}
.rbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--ln);color:var(--mt);font-size:12.5px}.rbar b{color:var(--tx2)}.rbar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rbar button{border:0;background:none;color:var(--mt);padding:2px}
.crow{display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 16px}
.crow textarea{flex:1;max-height:200px;min-height:24px;margin:7px 0;border:0;background:none;outline:0;resize:none;line-height:1.5}
.crow textarea::placeholder{color:var(--mt)}.crow .cnt{align-self:center;color:var(--mt);font-size:11.5px;font-weight:800}.crow .cnt.bad{color:var(--red)}
.send{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:13px;background:var(--acc);color:#120A00;transition:transform .12s,opacity .12s}.send:disabled{opacity:.35;cursor:default}.send:not(:disabled):hover{transform:scale(1.05)}
.ro{padding:14px;border:1px dashed var(--ln2);border-radius:16px;color:var(--mt);text-align:center;font-weight:700;font-size:13.5px}.ro .i{vertical-align:-4px;margin-right:6px}
.ac{position:absolute;left:10px;right:10px;bottom:calc(100% + 8px);z-index:10;padding:6px;border:1px solid var(--ln2);border-radius:14px;background:var(--s2);box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
.ac button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border:0;border-radius:10px;background:none;text-align:left;font-weight:700}.ac button.on{background:var(--s4)}.ac small{margin-left:auto;color:var(--mt)}

/* members */
.mem{display:flex;flex-direction:column;overflow:hidden}.mem .mh{padding:0 16px}.mem .mh b{font-size:14px}
.mlist{flex:1;overflow-y:auto;padding:4px 8px 10px}
.mu{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:12px;background:none;text-align:left;transition:background .12s}.mu:hover{background:var(--s3)}.mu.off{opacity:.45}
.mu div{flex:1;min-width:0}.mu b{display:block;font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu small{display:flex;align-items:center;gap:4px;color:var(--mt);font-size:11.5px;font-weight:700}.mu small .i{width:12px;height:12px}
.mu .crown{color:var(--yel)}.mu .shd{color:#B9A0FF}

/* overlays */
.ov{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;background:rgba(4,3,9,.66);backdrop-filter:blur(8px)}.ov.on{display:flex;animation:fi .15s ease-out}@keyframes fi{from{opacity:0}}
.dlg{width:min(520px,100%);max-height:80vh;overflow:auto;padding:22px;border:1px solid var(--ln2);border-radius:24px;background:var(--s1);box-shadow:0 40px 100px -30px rgba(0,0,0,.9);animation:pop .18s ease-out}@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}}
.dlg h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;font:400 21px 'Russo One',sans-serif}.dlg>p{margin:0 0 18px;color:var(--mt)}
.fl{display:block;margin-bottom:14px}.fl>span{display:block;margin-bottom:6px;color:var(--tx2);font-size:12.5px;font-weight:800}
.fl input,.fl textarea,.fl select{width:100%;padding:11px 13px;border:1px solid var(--ln2);border-radius:12px;background:var(--s2);outline:0}.fl input:focus,.fl textarea:focus{border-color:var(--acc)}
.pre{display:flex;align-items:center;border:1px solid var(--ln2);border-radius:12px;background:var(--s2);overflow:hidden}.pre span{padding:0 0 0 13px;color:var(--mt);font-weight:700;white-space:nowrap}.pre input{border:0;background:none;padding-left:2px}
.sws{display:flex;gap:9px}.sws button{width:32px;height:32px;border:3px solid transparent;border-radius:50%}.sws button.on{border-color:#fff}
.row{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:0;border-radius:13px;background:var(--acc);color:#120A00;font-weight:800;text-decoration:none;transition:transform .12s}.btn:hover{transform:translateY(-1px)}.btn.g{background:var(--s3);color:var(--tx)}.btn.r{background:rgba(255,77,103,.14);color:var(--red)}.btn:disabled{opacity:.5}
.err{min-height:18px;margin:-4px 0 8px;color:var(--red);font-size:13px;font-weight:700}
.dcards{display:grid;gap:10px}.dc{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--ln);border-radius:16px;background:var(--s2)}.dc .sp{width:46px;height:46px;background:var(--c);color:#120A00;cursor:default}.dc div{flex:1;min-width:0}.dc b{display:flex;align-items:center;gap:6px}.dc b .i{width:14px;height:14px;color:var(--acc)}.dc p{margin:2px 0 0;color:var(--mt);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dc small{color:var(--mt);font-size:12px}
.pal{width:min(600px,100%);padding:0;overflow:hidden}.pal input{width:100%;padding:18px 20px;border:0;border-bottom:1px solid var(--ln);background:none;outline:0;font-size:16px}
.pal .res{max-height:50vh;overflow:auto;padding:8px}.pal .res button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;text-align:left;font-weight:700}.pal .res button.on{background:var(--s3)}.pal .res small{margin-left:auto;color:var(--mt)}
.pal .res .cd{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--c,var(--s4));color:#120A00;font:400 12px 'Russo One',sans-serif}
.menu{position:fixed;z-index:85;min-width:200px;padding:6px;border:1px solid var(--ln2);border-radius:14px;background:var(--s2);box-shadow:0 20px 60px -20px rgba(0,0,0,.8)}
.menu .mhd{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;margin-bottom:4px;border-bottom:1px solid var(--ln)}.menu .mhd b{display:block}.menu .mhd small{color:var(--mt);font-size:12px}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:none;text-align:left;font-weight:700;font-size:13.5px}.menu button:hover{background:var(--s4)}.menu button.dg{color:var(--red)}
.chrow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--s2);margin-bottom:6px}.chrow span{flex:1}.chrow button{border:0;background:none;color:var(--mt)}.chrow button:hover{color:var(--red)}
.toast{position:fixed;left:50%;bottom:22px;z-index:95;padding:11px 16px;border:1px solid var(--ln2);border-radius:14px;background:var(--s2);font-weight:800;transform:translate(-50%,90px);transition:transform .25s;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}.toast.on{transform:translate(-50%,0)}.toast.bad{border-color:var(--red);color:#FF9AAA}
.gate{display:grid;place-items:center;height:100vh;padding:20px}.gate .dlg{text-align:center}.gate .dlg img{width:64px;height:64px;margin-bottom:10px}
.sk{border-radius:10px;background:linear-gradient(90deg,var(--s2),var(--s3),var(--s2));background-size:200% 100%;animation:sk 1.2s infinite}@keyframes sk{to{background-position:-200% 0}}
.empty{display:grid;place-items:center;height:100%;padding:24px;color:var(--mt);text-align:center}

/* ---------- mobile: нэг цонх + доод навигаци ---------- */
@media(max-width:1100px){.app{grid-template-columns:var(--rail) var(--chw) minmax(0,1fr) 0}.app .mem{display:none}.app.memopen .mem{display:flex;position:fixed;right:8px;top:8px;bottom:8px;width:280px;z-index:40;box-shadow:-20px 0 60px rgba(0,0,0,.5)}}
@media(max-width:760px){
  .app{grid-template-columns:1fr;padding:0;gap:0}.isl{border-radius:0;border:0}
  .rail,.chs{position:fixed;top:0;bottom:0;z-index:30;transform:translateX(calc(-100% - var(--rail) - 24px));transition:transform .22s;visibility:hidden}.app.nav .rail,.app.nav .chs{visibility:visible}.rail{left:0;width:var(--rail);border-right:1px solid var(--ln)}.chs{left:var(--rail);width:min(300px,calc(100vw - var(--rail) - 40px));border-right:1px solid var(--ln)}
  .app.nav .rail,.app.nav .chs{transform:none}.app.nav::after{content:"";position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.55)}
  .main{height:100dvh}.mh .mob{display:grid}.kbd{display:none}.m{padding-left:14px;padding-right:14px}.cmp{padding:0 10px calc(10px + env(safe-area-inset-bottom))}
  .app.memopen .mem{left:auto;right:0;top:0;bottom:0;width:min(300px,85vw);border-left:1px solid var(--ln)}
  .tools{right:10px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}