[hidden]{display:none!important}
.mbar,#hb,#ov{display:none}
@media (max-width:820px){
html,body{overflow-x:hidden}
input,textarea,select,.cs-b{font-size:16px!important}
#top{gap:8px!important;padding:0 10px!important;height:56px!important}
#top .tl{min-width:0!important;max-width:120px;white-space:nowrap;font-size:14px!important;overflow:hidden;text-overflow:ellipsis}#top .tl img{max-height:30px!important;max-width:110px!important}
#top .tt{flex:1;min-width:0}#ttl{font-size:16px!important;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dt,#top .tw{display:none!important}#top .tr{gap:6px;margin-left:auto}
#hb{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;font-size:20px;border:0;background:var(--prs);color:var(--pr);border-radius:10px;cursor:pointer;flex:none}
#app aside,#app main{height:calc(100% - 56px)!important}
#app aside{position:fixed!important;left:0;top:56px;bottom:0;width:270px!important;z-index:60;transform:translateX(-102%);transition:transform .22s;overflow-y:auto;height:auto!important}
body.drawer #app aside{transform:none;box-shadow:6px 0 24px rgba(0,0,0,.2)}
#ov{position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,.4);z-index:55}body.drawer #ov{display:block}
#mn2{display:none!important}
.nav{padding:12px 14px!important}
main{flex:0 0 100%!important;width:100%;min-width:0}main>header{display:none}
main>section,#c{padding:10px!important;overflow:auto}
/* chat em uma tela por vez */
.chat{display:block!important;height:calc(100dvh - 56px - 22px)!important}
.chat>.pn{display:none!important;height:100%}
.chat.mv-list>.pn:nth-child(1),.chat.mv-conv>.pn:nth-child(2),.chat.mv-info>.pn:nth-child(3){display:flex!important}
.mbar{display:flex;gap:8px;padding:8px 10px;border-bottom:1px solid var(--bd);justify-content:space-between}
.mbar button{border:0;background:var(--prs);color:var(--pr);font-weight:600;border-radius:10px;padding:8px 12px;font-size:14px;cursor:pointer}
#hd{padding:8px 10px!important;font-size:14px}.acs{margin-left:0!important;width:100%;flex-wrap:wrap}.acs .btn{flex:1}
.m{max-width:88%}
.bar{padding:8px!important}
/* quadros: colunas deslizam */
.board{width:100%;min-width:0!important;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.col,.col.tlist,.col.add{width:80vw!important;flex:0 0 80vw!important;scroll-snap-align:start;box-sizing:border-box}
/* telas de configuração */
.nv{grid-template-columns:1fr!important;height:auto!important}.nv .pn:first-child .lst{max-height:210px;overflow:auto}
.nvb{overflow:visible!important}
.row{flex-wrap:wrap}.row select,.row .cs{width:100%!important}
.form{max-width:none!important}
.tbar .cs,.tbar select,.tbar .btn{flex:1 1 auto}
.kx{flex-wrap:wrap}.kx input{min-width:120px}
/* janelas viram painel de baixo */
.mdl{align-items:flex-end!important}
.mb{width:100%!important;max-width:100%!important;box-sizing:border-box;max-height:92dvh;overflow:auto;border-radius:18px 18px 0 0!important;padding:16px!important}
.dd{left:8px!important;right:8px!important;width:auto!important;top:60px!important;max-height:75dvh}
.cs-l{max-width:calc(100vw - 16px)}
#lg{margin:6vh auto!important;width:calc(100% - 32px)}
.ag,.qg{grid-template-columns:1fr!important}
iframe{max-width:100%}
}