/* Notifications: bell button + panel (js/notes.js) */
.ntb{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#fff;transition:transform .15s,background .15s}
.ntb:active{transform:scale(.92)}
.ntb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ntb-n{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:99px;background:#ff453a;color:#fff;font:800 11px/18px -apple-system,system-ui,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px #0b0a12}
.ntb-n[hidden]{display:none}
.lt-acts{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.lt-acts .lt-av{margin-bottom:0}
.h12-tr{position:absolute;z-index:2;right:var(--pad);top:calc(var(--sat) + 12px);display:flex;align-items:center;gap:8px}
.h12-tr .h12-mp{position:static!important}
.h12-tr .ntb{background:rgba(10,10,16,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:rgba(255,255,255,.12)}

#ntf{position:fixed;inset:0;z-index:1200;display:none}
#ntf.on{display:block}
.ntf-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);animation:ntfFade .2s ease}
.ntf-card{position:absolute;inset:0;display:flex;flex-direction:column;background:#0b0a12;animation:ntfIn .28s cubic-bezier(.2,.9,.2,1)}
#ntf.out .ntf-card{animation:ntfOut .2s ease forwards}#ntf.out .ntf-scrim{opacity:0;transition:opacity .2s}
@keyframes ntfIn{from{transform:translateX(30px);opacity:0}}@keyframes ntfOut{to{transform:translateX(30px);opacity:0}}@keyframes ntfFade{from{opacity:0}}
.ntf-h{display:flex;align-items:center;gap:12px;padding:calc(var(--sat,0px) + 10px) 16px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.ntf-h>b{flex:1;font:700 20px/1.1 -apple-system,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.01em;color:#fff}
.ntf-back{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff}
.ntf-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ntf-rd{flex:none;height:36px;padding:0 4px;font-size:15px;font-weight:600;color:#7aa8ff}
.ntf-sc{flex:1;overflow-y:auto;padding:0 0 calc(var(--sab,0px) + 24px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ntf-sc h4{margin:20px 16px 6px;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.92)}
.ntl{background:none;border:0;border-radius:0;overflow:hidden}
.ntr{position:relative;overflow:hidden;transition:opacity .2s,transform .2s}
.ntr.gone{opacity:0;transform:translateX(-30px)}
.ntr-f{position:relative;z-index:1;display:flex;align-items:stretch;background:#0b0a12;transition:transform .25s cubic-bezier(.2,.9,.2,1)}
.ntr-del{position:absolute;inset:0 0 0 auto;width:88px;text-align:center;background:#ff3b30;color:#fff;font-size:15px;font-weight:600}
.ntr-m{flex:1;min-width:0;display:flex;align-items:flex-start;gap:13px;padding:13px 16px 13px 26px;text-align:left;position:relative}
.ntr-m:active{background:rgba(255,255,255,.04)}
/* separator from the text column, like iOS lists */
.ntr+.ntr .ntr-m:before{content:"";position:absolute;top:0;right:0;left:83px;height:1px;background:rgba(255,255,255,.09)}
/* unread: a blue dot in the left margin and a faint wash */
.ntr.new .ntr-f{background:#0f0f1a}
.ntr.new .ntr-m:after{content:"";position:absolute;left:10px;top:31px;width:9px;height:9px;border-radius:50%;background:#0a84ff}
.ntr-a{position:relative;flex:none;width:44px;height:44px}
.ntr-i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c);color:#fff}
.ntr-i svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ntr-pic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:hidden;background:linear-gradient(150deg,#8f82ec,#5b4fe0)}
.ntr-pic img{width:100%;height:100%;object-fit:cover}
.ntr-ini{font-size:18px;font-weight:700;color:#fff}
.ntr-k{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--c);color:#fff;box-shadow:0 0 0 2.5px #0b0a12}
.ntr.new .ntr-k{box-shadow:0 0 0 2.5px #0f0f1a}
.ntr-k svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ntr-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:1px}
.ntr-l1{display:flex;align-items:flex-start;gap:10px}
.ntr-ti{flex:1;min-width:0;font-size:16px;line-height:1.3;font-weight:400;color:rgba(255,255,255,.92)}
.ntr-ti b{font-weight:650;color:#fff}
.ntr.new .ntr-ti{color:#fff}
.ntr-l1 em{flex:none;padding-top:2px;font-style:normal;font-size:13.5px;color:rgba(235,235,245,.6);font-variant-numeric:tabular-nums}
.ntr-t small{font-size:15px;line-height:1.38;color:rgba(235,235,245,.78);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ntr-x{display:none}
@media (hover:hover) and (pointer:fine){
  .ntr-x{flex:none;display:grid;place-items:center;align-self:center;width:34px;height:34px;margin-right:10px;border-radius:50%;color:rgba(235,235,245,.6);opacity:0;transition:opacity .15s}
  .ntr:hover .ntr-x,.ntr-x:focus-visible{opacity:1}
  .ntr-x:hover{background:rgba(255,255,255,.08);color:#fff}
  .ntr-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .ntr-m:hover{background:rgba(255,255,255,.03)}
  .ntr-del{display:none}
}
.ntf-clr{display:block;margin:14px auto 0;padding:10px 16px;font-size:15px;font-weight:500;color:#ff6b61}
.ntf-e{display:flex;flex-direction:column;align-items:center;gap:6px;padding:56px 24px 24px;text-align:center}
.ntf-e svg{width:46px;height:46px;margin-bottom:8px;fill:none;stroke:rgba(235,235,245,.5);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ntf-e b{font-size:18px;font-weight:650}.ntf-e small{max-width:290px;font-size:15px;line-height:1.45;color:rgba(235,235,245,.72)}
.ntf-sk{padding:8px 16px}.ntf-sk i{display:block;height:64px;margin:10px 0;border-radius:16px;background:rgba(255,255,255,.05)}
/* settings at the bottom */
.ntf-sc h4+.ntl:last-child,.ntl:has(.nts){margin:0 16px;border-radius:16px;background:rgba(255,255,255,.05)}
.nts{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;text-align:left;border-top:1px solid rgba(255,255,255,.08)}
.ntl>.nts:first-child{border-top:0}
.nts>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nts b{font-size:16px;font-weight:600}.nts small{font-size:14px;line-height:1.4;color:rgba(235,235,245,.72)}
.nts>i{flex:none;position:relative;width:51px;height:31px;border-radius:99px;background:rgba(120,120,128,.4);transition:background .2s}
.nts>i:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .2s}
.nts>i.on{background:#30d158}.nts>i.on:after{transform:translateX(20px)}
.nts svg.ch{width:16px;height:16px;fill:none;stroke:rgba(235,235,245,.5);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* big screens: a panel under the bell instead of a full page */
@media (min-width:900px){
  .ntf-card{inset:16px 16px auto auto;width:420px;max-height:min(680px,calc(100vh - 32px));border-radius:22px;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px -20px rgba(0,0,0,.9)}
  .ntf-h{padding-top:12px}
  .ntf-scrim{background:rgba(0,0,0,.25)}
}
.dn-bell{width:100%;text-align:left;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;background:none;border:0;font:inherit;cursor:pointer}
.dn-bell .ntb-n{position:static;margin-left:auto;box-shadow:none}
/* Admin → Blocked words */
.wb-add{display:flex;gap:8px;margin:14px 0 10px}
.wb-add input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;font:inherit;font-size:16px}
.wb-add .btn{width:auto;height:46px;padding:0 18px;margin:0}
.wb-whole{display:flex;gap:10px;align-items:flex-start;margin:0 2px 14px;cursor:pointer}
.wb-whole input{margin-top:3px;width:18px;height:18px;accent-color:#8f82ec}
.wb-whole span{display:flex;flex-direction:column;gap:2px}.wb-whole b{font-size:14px}.wb-whole small{font-size:12.5px;line-height:1.4;color:rgba(235,235,245,.55)}
.wb-list{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow-y:auto;margin-bottom:14px}
.wb-r{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05)}
.wb-r span{flex:1;min-width:0;display:flex;flex-direction:column}.wb-r b{font-size:15px}.wb-r small{font-size:12px;color:rgba(235,235,245,.5)}
.wb-r button{height:32px;padding:0 12px;border-radius:99px;background:rgba(255,69,58,.14);color:#ff6b61;font-size:12.5px;font-weight:700}