.notification-bell-container{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:10px;margin-right:5px;transition:all 0.3s ease;border-radius:50%}html[dir="ltr"] .notification-bell-container{margin-left:auto}html[dir="rtl"] .notification-bell-container{margin-right:auto}.notification-container{position:relative;display:inline-block}#notificationBell{font-size:20px;cursor:pointer;color:var(--text-color,#333);transition:color 0.3s}#notificationBell:hover{color:var(--primary-color,#FF914D)}#notificationBell.shake{animation:shake 0.5s}@keyframes shake{0%,100%{transform:rotate(0deg)}10%,30%,50%,70%,90%{transform:rotate(-10deg)}20%,40%,60%,80%{transform:rotate(10deg)}}.notification-bell-icon{font-size:20px;color:#888;transition:transform 0.3s ease,color 0.3s ease}.notification-bell-container:hover{background-color:rgba(0,0,0,0.05)}.notification-bell-container:hover .notification-bell-icon{color:#FF914D;transform:scale(1.1)}.notification-badge{position:absolute;top:6px;right:6px;background:linear-gradient(135deg,#ff5252,#FF914D);color:white;border-radius:50%;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;padding:0 4px;box-shadow:0 2px 8px rgba(255,145,77,0.4);animation:notification-pulse 2s ease-in-out infinite}.notification-badge.large-count{font-size:9px;padding:0 3px}@keyframes notification-pulse{0%,100%{transform:scale(1);box-shadow:0 2px 8px rgba(255,145,77,0.4)}50%{transform:scale(1.1);box-shadow:0 4px 12px rgba(255,145,77,0.6)}}@keyframes notification-shake{0%,100%{transform:translateX(0) rotate(0deg)}10%,30%,50%,70%,90%{transform:translateX(-2px) rotate(-5deg)}20%,40%,60%,80%{transform:translateX(2px) rotate(5deg)}}.notification-bell-container.has-new .notification-bell-icon{animation:notification-shake 0.5s ease}.notification-dropdown{position:fixed;width:380px;max-width:min(380px,calc(100vw - 20px));background:white;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.12);display:none;flex-direction:column;z-index:10000;overflow:hidden;border:1px solid rgba(0,0,0,0.08);max-height:min(500px,calc(100vh - 100px))}html[dir="ltr"] .notification-dropdown{right:10px;left:auto;top:60px}html[dir="rtl"] .notification-dropdown{left:10px;right:auto;top:60px}.notification-dropdown.active{display:flex;animation:dropdown-slide-in 0.25s cubic-bezier(0.4,0,0.2,1) forwards}@keyframes dropdown-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notification-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(0,0,0,0.08);background:white;flex-shrink:0}.notification-header h3{margin:0;font-size:16px;font-weight:600;color:#2c3e50}.notification-settings-btn{background:none;border:none;padding:6px;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all 0.2s ease}.notification-settings-btn:hover{background:rgba(255,145,77,0.1);color:#FF914D}.notification-settings-btn i{font-size:18px}.notification-bulk-actions{display:none;padding:12px 18px;background:rgba(255,145,77,0.04);border-bottom:1px solid rgba(0,0,0,0.08);gap:10px;align-items:center;flex-shrink:0}.notification-bulk-actions.active{display:flex}.bulk-action-checkbox,.notification-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid #d0d0d0;border-radius:5px;cursor:pointer;position:relative;transition:all 0.2s ease;background:white}.bulk-action-checkbox:hover,.notification-checkbox:hover{border-color:#FF914D}.bulk-action-checkbox:checked,.notification-checkbox:checked{background:linear-gradient(135deg,#FF914D,#ff7a2f);border-color:#FF914D}.bulk-action-checkbox:checked::after,.notification-checkbox:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.bulk-action-btn{padding:7px 14px;border:none;background:#FF914D;color:white;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:all 0.2s ease;white-space:nowrap}.bulk-action-btn:hover{background:#ff7a2f;transform:translateY(-1px);box-shadow:0 2px 8px rgba(255,145,77,0.3)}.bulk-action-btn.secondary{background:#f5f5f5;color:#555}.bulk-action-btn.secondary:hover{background:#e0e0e0}.bulk-actions-label{margin:0 10px;font-size:13px;color:#555}.notification-list-container{flex:1;overflow-y:auto;max-height:420px}.notification-list-container::-webkit-scrollbar{width:6px}.notification-list-container::-webkit-scrollbar-track{background:rgba(0,0,0,0.02)}.notification-list-container::-webkit-scrollbar-thumb{background:rgba(255,145,77,0.25);border-radius:3px}.notification-list-container::-webkit-scrollbar-thumb:hover{background:rgba(255,145,77,0.4)}.notification-item{display:flex;padding:14px 18px;border-bottom:1px solid rgba(0,0,0,0.05);cursor:pointer;transition:all 0.2s ease;position:relative}.notification-item:hover{background:rgba(255,145,77,0.04)}.notification-item.unread{background:rgba(255,145,77,0.03)}.notification-item.unread::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(135deg,#FF914D,#ff5252)}.notification-checkbox-container{display:none;align-items:flex-start;margin-right:12px}.notification-bulk-actions.active ~ .notification-list-container .notification-checkbox-container{display:flex}.notification-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,145,77,0.15)}html[dir="ltr"] .notification-avatar{margin-right:12px;margin-left:10px}html[dir="rtl"] .notification-avatar{margin-left:12px;margin-right:10px}.notification-content{flex:1;min-width:0}.notification-sender{font-size:14px;font-weight:600;color:#2c3e50;margin-bottom:4px;display:flex;align-items:center;gap:6px}.notification-unread-dot{width:7px;height:7px;background:#FF914D;border-radius:50%;animation:notification-pulse 2s ease-in-out infinite}.notification-message-preview{font-size:13px;color:#666;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}.notification-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#999}.notification-time{display:flex;align-items:center;gap:4px}.notification-delete-btn{position:absolute;top:12px;right:15px;background:transparent;border:none;color:#999;font-size:16px;cursor:pointer;opacity:0;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);padding:8px;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;z-index:2}html[dir="rtl"] .notification-delete-btn{right:auto;left:15px}.notification-item:hover .notification-delete-btn{opacity:1}@media (hover:none),(max-width:768px){.notification-delete-btn{opacity:1;background:rgba(0,0,0,0.03)}}.notification-delete-btn:hover{color:#ff5252;background:rgba(255,82,82,0.1);transform:scale(1.1);box-shadow:0 2px 8px rgba(255,82,82,0.2)}.notification-action-btn{background:white;border:1px solid #e0e0e0;color:#666;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:4px}.notification-action-btn:hover{border-color:#FF914D;color:#FF914D;background:rgba(255,145,77,0.05)}.notification-item.unread .notification-action-btn{background:rgba(255,145,77,0.3);border-color:#FF914D}body.dark-mode .notification-action-btn,body.dark .notification-action-btn{background:#333;border-color:#444;color:#FF914D}body.dark-mode .notification-action-btn:hover,body.dark .notification-action-btn:hover{border-color:#FF914D;color:#FF914D;background:rgba(255,145,77,0.1)}.notification-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.notification-empty-icon{font-size:56px;color:rgba(255,145,77,0.25);margin-bottom:16px}.notification-empty-state h4{font-size:15px;color:#666;margin:0 0 8px 0;font-weight:600}.notification-empty-state p{font-size:13px;color:#999;margin:0}.notification-loading{display:flex;justify-content:center;align-items:center;padding:20px}.spinner{width:28px;height:28px;border:3px solid rgba(255,145,77,0.2);border-top-color:#FF914D;border-radius:50%;animation:spinner-rotate 0.8s linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}body.dark-mode .notification-bell-container:hover,body.dark .notification-bell-container:hover{background-color:rgba(255,255,255,0.08)}body.dark-mode .notification-bell-icon,body.dark .notification-bell-icon{color:#d0d0d0}body.dark-mode .notification-bell-container:hover .notification-bell-icon,body.dark .notification-bell-container:hover .notification-bell-icon{color:#FF914D}body.dark-mode .notification-dropdown,body.dark .notification-dropdown{background:#2a2a2a;border:1px solid rgba(255,145,77,0.15);box-shadow:0 12px 48px rgba(0,0,0,0.6)}body.dark-mode .notification-header,body.dark .notification-header{background:#2a2a2a;border-bottom:1px solid rgba(255,255,255,0.08)}body.dark-mode .notification-header h3,body.dark .notification-header h3{color:#f0f0f0}body.dark-mode .notification-settings-btn,body.dark .notification-settings-btn{color:#c0c0c0}body.dark-mode .notification-settings-btn:hover,body.dark .notification-settings-btn:hover{background:rgba(255,145,77,0.15);color:#FF914D}body.dark-mode .notification-bulk-actions,body.dark .notification-bulk-actions{background:rgba(255,145,77,0.08);border-bottom:1px solid rgba(255,255,255,0.08)}body.dark-mode .notification-item,body.dark .notification-item{border-bottom:1px solid rgba(255,255,255,0.06)}body.dark-mode .notification-item:hover,body.dark .notification-item:hover{background:rgba(255,145,77,0.12)}body.dark-mode .notification-item.unread,body.dark .notification-item.unread{background:rgba(255,145,77,0.08)}body.dark-mode .notification-sender,body.dark .notification-sender{color:#f0f0f0}body.dark-mode .notification-message-preview,body.dark .notification-message-preview{color:#c0c0c0}body.dark-mode .notification-footer,body.dark .notification-footer{color:#909090}body.dark-mode .notification-delete-btn,body.dark .notification-delete-btn{color:#909090}body.dark-mode .notification-delete-btn:hover,body.dark .notification-delete-btn:hover{color:#ff6b6b;background:rgba(255,82,82,0.2)}body.dark-mode .notification-empty-state h4,body.dark .notification-empty-state h4{color:#c0c0c0}body.dark-mode .notification-empty-state p,body.dark .notification-empty-state p{color:#808080}body.dark-mode .bulk-action-btn.secondary,body.dark .bulk-action-btn.secondary{background:#3a3a3a;color:#e0e0e0;border:1px solid rgba(255,255,255,0.1)}body.dark-mode .bulk-action-btn.secondary:hover,body.dark .bulk-action-btn.secondary:hover{background:#4a4a4a}body.dark-mode .bulk-actions-label,body.dark .bulk-actions-label{color:#c0c0c0}body.dark-mode .bulk-action-checkbox,body.dark-mode .notification-checkbox,body.dark .bulk-action-checkbox,body.dark .notification-checkbox{border-color:#606060;background:#2a2a2a}body.dark-mode .bulk-action-checkbox:hover,body.dark-mode .notification-checkbox:hover,body.dark .bulk-action-checkbox:hover,body.dark .notification-checkbox:hover{border-color:#FF914D}@media (max-width:768px){.notification-dropdown{width:360px;max-width:calc(100vw - 20px);max-height:calc(100vh - 80px);right:10px;left:auto}html[dir="rtl"] .notification-dropdown{left:10px;right:auto}.notification-list-container{max-height:calc(100vh - 220px)}}@media (max-width:600px){.notification-dropdown{width:calc(100vw - 20px);max-width:100%;left:10px!important;right:10px!important;margin:0 auto;max-height:calc(100vh - 70px)}.notification-list-container{max-height:calc(100vh - 200px)}.notification-header h3{font-size:15px}.notification-item{padding:12px 14px}.notification-sender{font-size:13px}.notification-message-preview{font-size:12px;-webkit-line-clamp:1;line-clamp:1}.bulk-action-btn{font-size:12px;padding:6px 10px}}@media (max-width:480px){.notification-dropdown{width:calc(100vw - 16px);left:8px!important;right:8px!important;top:50px;max-height:calc(100vh - 60px)}.notification-list-container{max-height:calc(100vh - 180px)}.notification-header{padding:12px 14px}.notification-header h3{font-size:14px}.notification-avatar{width:36px;height:36px;margin-right:10px}.bulk-actions-label{font-size:12px;margin:0 6px}}@media (max-width:360px){.notification-dropdown{width:calc(100vw - 12px);left:6px!important;right:6px!important;max-height:calc(100vh - 50px)}.notification-list-container{max-height:calc(100vh - 160px)}.notification-sender{font-size:12px}.notification-message-preview{font-size:11px}}.notification-item:focus,.notification-bell-container:focus{outline:2px solid #FF914D;outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}