.notification-bell-container{--notification-bell-text:var(--palette-white);display:inline-block;position:relative}.bell-button{color:color-mix(in srgb, var(--notification-bell-text) 87%, transparent);cursor:pointer;padding:var(--space-2) var(--space-3);transition:transform var(--motion-fast);background:0 0;border:none;justify-content:center;align-items:center;line-height:1;display:flex;position:relative}.bell-icon{font-size:var(--font-size-lg)}.bell-button:hover{transform:scale(1.1)}.unread-badge{background-color:var(--color-danger);color:var(--palette-white);border-radius:var(--radius-pill);width:20px;height:20px;font-size:var(--font-size-small);font-weight:var(--font-weight-bold);justify-content:center;align-items:center;display:flex;position:absolute;top:0;right:0}.notification-dropdown{box-sizing:border-box;background:var(--color-surface);border:1px solid var(--color-panel-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:9999;min-width:320px;max-width:400px;margin-top:var(--space-2);position:absolute;top:100%;right:0;overflow:hidden}[data-theme=dark] .notification-dropdown{background-color:var(--color-surface)}[data-theme=dark] .notification-header,[data-theme=dark] .notification-footer{background-color:var(--color-surface-section)}.notification-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);background-color:var(--color-surface-section);justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.notification-header h3{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);color:var(--color-text-strong);margin:0}.notification-close-btn{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-strong);border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;width:2rem;height:2rem;display:inline-flex}.notification-close-btn:hover{background:var(--color-surface-hover)}.notification-list{max-height:320px;overflow-y:auto}.notification-footer{padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-border);background-color:var(--color-surface-section)}.view-all-notifications-btn{border:1px solid var(--color-border);background-color:var(--color-surface);width:100%;color:var(--color-text-strong);border-radius:var(--radius-lg);padding:var(--space-2);font-size:var(--font-size-small);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--motion-fast), border-color var(--motion-fast)}.view-all-notifications-btn:hover{background-color:var(--color-surface-hover);border-color:var(--color-action)}.notification-item{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);align-items:flex-start;gap:var(--space-2);transition:background-color var(--motion-fast);display:flex}.notification-item:last-child{border-bottom:none}.notification-item.unread{background-color:color-mix(in srgb, var(--color-action) 10%, var(--color-surface));cursor:pointer}.notification-item.read{background-color:var(--color-surface)}.notification-item:hover{background-color:var(--color-surface-hover)}.unread-dot{border-radius:var(--radius-pill);background-color:var(--color-action);width:10px;height:10px;margin-top:var(--space-1);flex-shrink:0;display:inline-block}.notification-content{flex:1;min-width:0}.notification-title{color:var(--color-text-strong);font-size:var(--font-size-small);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-1)}.notification-message{color:var(--color-text);font-size:var(--font-size-small);overflow-wrap:anywhere;line-height:1.35}.notification-preview{-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.notification-dropdown button.notification-item{border:0;border-bottom:1px solid var(--color-border);text-align:left;width:100%;font:inherit;cursor:pointer}.notification-dropdown .notification-title{-webkit-line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.notification-dropdown button:focus-visible{outline:2px solid var(--color-action);outline-offset:-3px}.mark-read-btn{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);border-radius:var(--radius-md);cursor:pointer;width:28px;height:28px;transition:background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.mark-read-btn:hover{background-color:var(--color-surface-hover);border-color:var(--color-action);color:var(--color-text-strong)}.no-notifications{padding:var(--space-4);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-small)}.notification-bell-container.mobile{align-items:center;display:flex}.notification-backdrop{display:none}.bell-button.mobile{padding:var(--space-2)}.bell-button.mobile .bell-icon{font-size:var(--font-size-body)}@media (width<=960px){.notification-backdrop{background:color-mix(in srgb, var(--color-overlay) 70%, transparent);z-index:9997;border:0;margin:0;padding:0;display:block;position:fixed;inset:62px 0 0}.notification-dropdown,.notification-dropdown.mobile{width:auto;min-width:0;max-width:none;max-height:calc(100vh - var(--notification-sheet-top,62px));z-index:9998;border-left:none;border-right:none;border-radius:0;margin-top:0;position:fixed;top:62px;left:0;right:0}.notification-list{max-height:calc(100vh - var(--notification-sheet-top,62px) - 134px)}.notification-close-btn{width:2rem;height:2rem}}