.notification-bell{display:inline-block;position:relative}.notification-bell.loading{opacity:.6}.notification-bell.loading .bell-icon{animation:1.5s infinite pulse}.notification-bell .bell-button{-webkit-backdrop-filter:blur(5px);color:#e0e0e0;cursor:pointer;background-color:#323232b3;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:background-color .2s,color .2s;display:flex;position:relative}.notification-bell .bell-button:hover{color:#fff;background-color:#fff3}.notification-bell .bell-button.has-unread{color:#3b82f6}.notification-bell .bell-button.has-unread:hover{color:#60a5fa}.notification-bell .bell-button svg{width:20px;height:20px}.notification-bell .notification-badge{color:#fff;background-color:#ef4444;border:2px solid #1a1a1a;border-radius:10px;justify-content:center;align-items:center;min-width:18px;height:18px;font-size:11px;font-weight:600;line-height:1;display:flex;position:absolute;top:2px;right:2px}.notification-bell .notification-dropdown{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#1c1c1cf2;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;width:380px;max-width:90vw;max-height:500px;margin-top:8px;display:flex;position:absolute;top:100%;right:0;box-shadow:0 8px 32px #0000004d}.notification-bell .notification-dropdown .dropdown-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:16px 20px 12px;display:flex}.notification-bell .notification-dropdown .dropdown-header h3{color:#e0e0e0;margin:0;font-size:16px;font-weight:600}.notification-bell .notification-dropdown .dropdown-header .mark-all-read{color:#3b82f6;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:13px;transition:background-color .2s}.notification-bell .notification-dropdown .dropdown-header .mark-all-read:hover{background-color:#3b82f61a}.notification-bell .notification-dropdown .notifications-list{flex:1;max-height:400px;overflow-y:auto}.notification-bell .notification-dropdown .notifications-list::-webkit-scrollbar{width:6px}.notification-bell .notification-dropdown .notifications-list::-webkit-scrollbar-track{background:#ffffff0d}.notification-bell .notification-dropdown .notifications-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.notification-bell .notification-dropdown .no-notifications{text-align:center;color:#888;padding:40px 20px}.notification-bell .notification-dropdown .no-notifications p{margin:0;font-size:14px}.notification-bell .notification-dropdown .notification-item{cursor:pointer;border-bottom:1px solid #ffffff0d;align-items:flex-start;gap:12px;padding:16px 20px;transition:background-color .2s;display:flex;position:relative}.notification-bell .notification-dropdown .notification-item:last-child{border-bottom:none}.notification-bell .notification-dropdown .notification-item:hover{background-color:#ffffff0d}.notification-bell .notification-dropdown .notification-item.unread{background-color:#3b82f60d}.notification-bell .notification-dropdown .notification-item.unread:hover{background-color:#3b82f61a}.notification-bell .notification-dropdown .notification-item .notification-content{flex:1;min-width:0}.notification-bell .notification-dropdown .notification-item .notification-header{align-items:flex-start;gap:8px;margin-bottom:4px;display:flex}.notification-bell .notification-dropdown .notification-item .notification-header .notification-text{color:#e0e0e0;flex:1;font-size:13px;font-weight:500;line-height:1.4}.notification-bell .notification-dropdown .notification-item .notification-header .mention-badge{color:#fff;background-color:#3b82f6;border-radius:10px;flex-shrink:0;padding:2px 6px;font-size:10px;font-weight:600;line-height:1}.notification-bell .notification-dropdown .notification-item .notification-message{color:#b0b0b0;margin-bottom:6px;font-size:12px;font-style:italic;line-height:1.4}.notification-bell .notification-dropdown .notification-item .notification-context{color:#999;margin-top:2px;margin-bottom:6px;font-size:10px;font-style:normal}.notification-bell .notification-dropdown .notification-item .notification-context .context-project{color:#aaa;font-weight:500}.notification-bell .notification-dropdown .notification-item .notification-context .context-separator{color:#666;font-weight:400}.notification-bell .notification-dropdown .notification-item .notification-context .context-dataset,.notification-bell .notification-dropdown .notification-item .notification-context .context-type{color:#888;font-weight:400}.notification-bell .notification-dropdown .notification-item .notification-time{color:#888;font-size:11px}.notification-bell .notification-dropdown .notification-item .unread-indicator{background-color:#3b82f6;border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:4px}.notification-bell .notification-dropdown .dropdown-footer{border-top:1px solid #ffffff1a;padding:12px 20px}.notification-bell .notification-dropdown .dropdown-footer .view-all-button{color:#3b82f6;cursor:pointer;background:0 0;border:1px solid #3b82f680;border-radius:4px;width:100%;padding:8px 16px;font-size:13px;transition:all .2s}.notification-bell .notification-dropdown .dropdown-footer .view-all-button:hover{background-color:#3b82f61a;border-color:#3b82f6}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width:480px){.notification-bell .notification-dropdown{width:calc(100vw - 20px);right:-160px}}
