.sidebar-notification-button{position:relative;z-index:4;display:grid;width:100%;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid transparent;color:#9eb3c1;background:transparent;border-radius:9px;text-align:left;font-size:10px;transition:border-color .18s,background .18s,color .18s}
.sidebar-notification-button>span:first-child{display:flex;color:#8da7b7}.sidebar-notification-button svg{width:16px;height:16px;fill:none;stroke:currentColor}
.sidebar-notification-button b{display:grid;min-width:20px;height:20px;place-items:center;padding:0 6px;color:#071117;background:linear-gradient(110deg,#18eed8,#8e65ff);border-radius:999px;font-size:8px;box-shadow:0 0 15px rgba(0,245,220,.25)}
.sidebar-notification-button.has-unread{color:#edffff;border-color:#175068;background:rgba(0,245,220,.06)}
.notification-backdrop{position:fixed;inset:0;z-index:180;display:flex;justify-content:flex-end;background:rgba(0,5,10,.58);backdrop-filter:blur(3px)}
.notification-panel{display:flex;width:min(430px,100vw);max-width:100vw;height:100dvh;min-width:0;flex-direction:column;overflow-x:hidden;border-left:1px solid #1a4b60;background:linear-gradient(155deg,#071925,#020b13 62%);box-shadow:-28px 0 80px rgba(0,0,0,.6);animation:notificationIn .22s ease both}
@keyframes notificationIn{from{opacity:.5;transform:translateX(34px)}}
.notification-panel>header{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:18px;padding:25px 22px 18px;border-bottom:1px solid rgba(34,79,98,.5)}.notification-panel>header>div{min-width:0;flex:1}
.notification-panel h2{margin:6px 0 4px;font:600 23px Space Grotesk,sans-serif}.notification-panel header p{margin:0;color:#728d9e;font-size:9px;line-height:1.5}
.notification-close{display:grid;flex:0 0 36px;width:36px;height:36px;place-items:center;padding:0;border:1px solid #19465a;color:#8ba4b4;background:#071722;border-radius:50%}
.notification-close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor}
.notification-toolbar{display:flex;min-height:46px;align-items:center;justify-content:flex-end;padding:7px 20px;border-bottom:1px solid rgba(34,79,98,.35)}
.notification-toolbar button{padding:7px 9px;border:0;color:#55dbe5;background:transparent;border-radius:7px;font-size:9px}.notification-toolbar button:disabled{color:#526b79;cursor:default}
.notification-list{flex:1;min-height:0;overflow-y:auto;padding:10px 12px 24px;overscroll-behavior:contain;scrollbar-color:#1a4a5d transparent;scrollbar-width:thin}
.notification-item{position:relative;display:grid;width:100%;grid-template-columns:37px minmax(0,1fr);gap:11px;padding:13px 12px;border:1px solid transparent;color:#c7d7df;background:transparent;border-radius:10px;text-align:left;transition:border-color .18s,background .18s}
.notification-item.unread{border-color:rgba(28,104,123,.46);background:linear-gradient(100deg,rgba(0,245,220,.07),rgba(119,75,235,.055))}.notification-item.unread:after{position:absolute;right:11px;top:12px;width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 9px var(--cyan);content:""}
.notification-kind{display:grid;width:37px;height:37px;place-items:center;color:var(--cyan);background:#092531;border:1px solid #155167;border-radius:10px}.notification-kind svg{width:17px;height:17px;fill:none;stroke:currentColor}
.notification-item.security .notification-kind,.notification-item.new_login .notification-kind{color:#ae79ff;background:#1a1835;border-color:#49357b}.notification-item.gallery_duplicate .notification-kind,.notification-item.media_in_use .notification-kind{color:#ff7ca9;background:#311421;border-color:#713047}.notification-item.share_created .notification-kind,.notification-item.share_expiring .notification-kind{color:#5edcff;background:#10263b;border-color:#24516e}
.notification-copy{display:grid;min-width:0;gap:4px;padding-right:9px}.notification-copy strong{overflow:hidden;color:#eaf7fb;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.notification-copy span{color:#8299a7;font-size:9px;line-height:1.5}.notification-copy time{color:#587382;font-size:7px}
.notification-empty,.notification-loading{display:grid;min-height:260px;place-items:center;align-content:center;gap:13px;color:#678291;font-size:9px;text-align:center}.notification-empty>span{display:grid;width:52px;height:52px;place-items:center;color:#5f8292;border:1px solid #173f51;background:#071925;border-radius:15px}.notification-empty svg{width:23px;height:23px;fill:none;stroke:currentColor}.notification-loading .session-boot-spinner{width:25px;height:25px}
body.notifications-open{overflow:hidden}
@media(hover:hover) and (pointer:fine){.sidebar-notification-button:hover{color:#edffff;border-color:#205a70;background:#0a202c}.notification-item:hover{border-color:#236077;background:#0a202b}.notification-close:hover,.notification-toolbar button:not(:disabled):hover{color:var(--cyan);background:#0b2633}}
@media(max-width:560px){.notification-panel{width:100%;border-left:0}.notification-panel>header{padding:20px 16px 15px}.notification-panel h2{font-size:21px}.notification-toolbar{padding-inline:13px}.notification-list{padding:8px 8px max(20px,env(safe-area-inset-bottom))}}
