/* Pop-ups (js/pops.js): one banner that drops in from the top like a text from mntlst.cc.
   The old pop-up elements stay hidden; the banner shows what they say. */
#chtoast,#rftoast,#tkpop,#tntoast,#achpop,#toast{display:none!important}
#mbn{position:fixed;z-index:3000;left:50%;top:calc(var(--sat,env(safe-area-inset-top,0px)) + 8px);width:min(calc(100% - 16px),420px);
  transform:translate(-50%,calc(-100% - 40px));opacity:0;visibility:hidden;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .5s cubic-bezier(.2,1.25,.35,1),opacity .25s ease,visibility 0s linear .5s}
#mbn.on{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .5s cubic-bezier(.2,1.25,.35,1),opacity .2s ease,visibility 0s}
#mbn.out{transition:transform .32s cubic-bezier(.5,0,.75,0),opacity .3s ease,visibility 0s linear .32s}
#mbn.bump .mbn-c{animation:mbnBump .38s cubic-bezier(.2,1.4,.4,1)}
@keyframes mbnBump{40%{transform:scale(.96)}}
#mbn.tap{cursor:pointer}
.mbn-c{position:relative;z-index:1;display:flex;align-items:flex-start;gap:12px;padding:12px 14px 13px 12px;border-radius:26px;
  background:rgba(28,27,34,.78);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);
  border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 50px -12px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
/* a soft glow from the app icon, like light off the logo */
.mbn-g{position:absolute;z-index:0;left:4px;top:2px;width:90px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(143,110,255,.55),transparent);filter:blur(14px);opacity:.75;pointer-events:none}
.mbn-av{flex:none;width:40px;height:40px;border-radius:11px;overflow:hidden;box-shadow:0 4px 12px -4px rgba(124,92,255,.8)}
.mbn-av img{display:block;width:100%;height:100%;object-fit:cover}
.mbn-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:1px}
.mbn-h{display:flex;align-items:baseline;gap:8px}
.mbn-h b{flex:1;min-width:0;font-size:15px;font-weight:650;color:#fff;letter-spacing:-.01em}
.mbn-h em{flex:none;font-style:normal;font-size:13px;color:rgba(235,235,245,.6)}
.mbn-m{font-size:15px;line-height:1.33;color:rgba(255,255,255,.9);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.mbn-m strong{font-weight:600;color:#fff}
/* computers: top-right corner, like desktop notifications */
@media (min-width:1100px){#mbn{left:auto;right:20px;top:20px;width:380px;transform:translate(0,calc(-100% - 40px))}#mbn.on{transform:translate(0,0)}}
@media (min-width:1100px){#mbn{--mx:0}}
@media (prefers-reduced-motion:reduce){#mbn,#mbn.on,#mbn.out{transition:opacity .2s,visibility 0s linear .2s}#mbn{transform:translate(-50%,0)}#mbn.bump .mbn-c{animation:none}}
@media (prefers-reduced-motion:reduce) and (min-width:1100px){#mbn{transform:none}}

/* U.ask(): the in-app "are you sure?" box */
.mask{position:fixed;inset:0;z-index:3100;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.5);opacity:0;transition:opacity .16s}
.mask.on{opacity:1}.mask.out{opacity:0}
.mask-c{width:min(100%,300px);border-radius:22px;overflow:hidden;background:rgba(36,35,44,.92);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.1);
  text-align:center;transform:scale(1.08);transition:transform .2s cubic-bezier(.2,1.2,.4,1)}
.mask.on .mask-c{transform:scale(1)}
.mask-c>b{display:block;padding:20px 18px 0;font-size:17px;font-weight:650;color:#fff}
.mask-c>p{margin:6px 0 0;padding:0 18px;font-size:14px;line-height:1.4;color:rgba(235,235,245,.75)}
.mask-b{display:flex;margin-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.mask-b button{flex:1;height:48px;font-size:17px;color:#7aa8ff;text-align:center}
.mask-b button+button{border-left:1px solid rgba(255,255,255,.12)}
.mask-b button.ok{font-weight:600}.mask-b button.red{font-weight:600;color:#ff5a50}
.mask-b button:active{background:rgba(255,255,255,.06)}
.mask-b button:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* phone keyboard (js/kb.js): room to scroll the field you're typing in above the keyboard */
:root{--kb:0px}
html.kb-open #hm .body,html.kb-open .e7-sc,html.kb-open #shc,html.kb-open .ntf-sc,html.kb-open .dm-sc,html.kb-open .tkp-sc,html.kb-open .ups-sc,html.kb-open #cbody,html.kb-open .o3-track{padding-bottom:calc(var(--kb) + 24px)!important}
html.kb-open #sh.on>div{max-height:calc(100% - var(--kb) - 12px)!important;margin-bottom:var(--kb)!important;transition:margin .2s ease}
html.kb-open .dm-card{bottom:var(--kb)!important;transition:bottom .2s ease}
html.kb-open .dm-comp{padding-bottom:10px}
html.kb-open #ob .o3-bottom{display:none}
html.kb-open #nv.tb{display:none!important}
/* our own swipe-back on profiles (js/swipeback.js), not the browser's */
html,body{overscroll-behavior-x:none}