/* Notification surfaces: isolated from generic dropdown rules. */
#notify-menu, #notify-settings { position:fixed; top:62px; right:16px; left:auto; width:454px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 78px); padding:16px; border:1px solid #314054; border-radius:12px; background:linear-gradient(135deg,#192332,#131c29); box-shadow:0 18px 55px #0007; z-index:1100; overflow:auto; }
#notify-menu:has(+ #notify-settings:not([hidden])) { right:408px; }
#notify-settings { width:376px; right:16px; z-index:1101; }
.notify-head { margin:0 0 12px; min-height:34px; }
.notify-head h3 { font-size:16px; line-height:1.3; }
#notify-settings .notify-head { position:sticky; top:-16px; z-index:2; background:#182231; padding:8px 0; }
#notify-settings .notify-type:has(#ns-on) { border-radius:10px; border-bottom-width:1px; }
#notify-menu .notify-head .icon-btn, #notify-settings .notify-head .icon-btn { width:34px; height:34px; padding:6px; flex:0 0 34px; justify-content:center; border:1px solid transparent; }
#notify-menu #n-gear { border-color:#2c3b50; background:#1b2738; }
#notify-menu .notify-tabs { display:flex; flex-wrap:nowrap; gap:4px; margin:0 -16px; padding:0 12px; border-bottom:1px solid #2b394d; overflow-x:auto; }
#notify-menu .notify-tabs button { flex:1 0 auto; justify-content:center; gap:8px; border-radius:0; padding:10px 4px; font-size:12px; font-weight:500; border-bottom:2px solid transparent; white-space:nowrap; }
#notify-menu .notify-tabs button.active { background:transparent; color:#fff; border-bottom-color:#c4e4ff; }
.notify-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; background:#445b7c; color:#eaf1ff; border-radius:10px; font-size:11px; }
.active .notify-count { background:#4167ff; }
.notify-mark { margin:10px 0 2px; }
#notify-menu .notify-mark button { padding:4px; font-size:11px; font-weight:400; color:#8bb5ff; }
#notify-menu button:disabled { opacity:.4; cursor:default; }
.notify-list { min-height:140px; }
.notify-group { padding:7px 2px; margin:0; }
#notify-menu .notify-row { display:flex; width:100%; text-align:left; padding:10px 6px; gap:12px; align-items:center; border-bottom:1px solid #273449; border-radius:7px; }
#notify-menu .notify-row.unread { background:#ffffff03; }
.notify-badge { border-radius:10px; width:36px; height:36px; flex:0 0 36px; box-shadow:inset 0 0 20px #07112077; }
.notify-badge .ico { display:block; width:20px; height:20px; mask:var(--ico) center / contain no-repeat; -webkit-mask:var(--ico) center / contain no-repeat; }
.notify-row .grow { display:flex; flex-direction:column; gap:4px; overflow-wrap:anywhere; }
.notify-row strong { font-size:12px; font-weight:600; }
.notify-row .muted { display:block; font-size:11px; }
.notify-row .meta { flex:0 0 38px; align-self:flex-start; padding-top:2px; }
.notify-dot { display:block; background:#5279ff; }
.notify-empty { min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; color:#8b9bb4; }
.notify-empty strong { color:#dce5f3; font-size:14px; }
#notify-settings>p { line-height:1.6; margin:0 0 12px; }
#notify-settings .notify-type { padding:10px 8px; border:1px solid #2a384b; border-bottom-width:0; background:#ffffff02; }
#notify-settings .notify-type:has(+ .notify-group), #notify-settings .notify-type:last-of-type { border-bottom-width:1px; }
#notify-settings .notify-type .grow { display:flex; flex-direction:column; gap:4px; }
#notify-settings .notify-type strong { font-size:12px; }
#notify-settings .notify-type .muted { font-size:11px; line-height:1.4; }
#notify-settings .notify-group { color:#e3ebf8; font-size:13px; padding:15px 0 8px; }
#notify-settings .notify-switch { width:42px; height:24px; flex:0 0 42px; padding:0; margin:0; cursor:pointer; border:1px solid #667b98; }
#notify-settings .notify-switch::after { width:18px; height:18px; top:2px; left:2px; box-shadow:0 1px 4px #0004; }
#notify-settings #ns-tg-actions { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 4px; }
#notify-settings #ns-bot-token { margin:6px 0; background:#152033; border:1px solid #2a3548; border-radius:8px; padding:8px 10px; }
#notify-settings .notify-switch:checked::after { left:20px; }
#notify-settings .notify-how label { min-height:30px; font-size:12px; font-weight:400; }
#notify-settings input[type=checkbox] { accent-color:#4167ff; }
.notify-save-status { min-height:18px; margin:10px 0 0; font-size:11px; color:#98abc5; }
#bell-btn { position:relative; }
#bell-count:not(:empty) { min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:#eb5757; color:#fff; font-size:10px; display:inline-flex; align-items:center; justify-content:center; }
@media(max-width:880px) {
 #notify-menu:has(+ #notify-settings:not([hidden])) { right:16px; visibility:hidden; }
}
@media(max-width:760px), (max-width:1100px) and (max-height:600px) {
 #notify-menu, #notify-settings { top:60px; left:8px; right:8px; width:auto; max-width:calc(100vw - 16px); max-height:calc(100dvh - 72px); padding:12px; }
 #notify-menu:has(+ #notify-settings:not([hidden])) { visibility:hidden; }
 #notify-menu .notify-tabs { margin:0 -12px; padding:0 6px; gap:0; }
 #notify-menu .notify-tabs button { gap:4px; font-size:11px; }
 #notify-menu .notify-head .icon-btn, #notify-settings .notify-head .icon-btn { min-height:40px; width:40px; flex-basis:40px; }
 #notify-settings .notify-type { min-height:62px; }
 #notify-settings .notify-head { top:-12px; }
}